Внутренний HTML-код отображается перед заполнением значения свойства

Question

У меня есть библиотека из компонента A и шаблона A. В шаблоне А я связываю свойство компонента А через привязку innerhtml. Существует функция populate (obj), которая получает объект 'options', а затем использует его для получения значения, полезного для установки свойства.

ComponentA.ts

@Component({
  selector: 'lib-sqv',
  templateUrl: './templateA.component.html'

})

export class SqvLibComponent {

   seq: string;

   populate(op: Options): void {

    ----some other functions---

     this.seq = 'someData';
}

ComponentB.ts

@Component({
  selector: 'app-root',
  templateUrl: './templateB.component.html'
})

export class AppComponent implements OnInit {

 ngOnInit() {


    let options = { someValue }

    const s: SqvLibComponent = new SqvLibComponent();
    s.populate(options);

  }
}

В TemplateB есть селектор .

Представление TemplateA отображается до того, как свойство this.seq получит значение.

Я заметил, что если я задаю значение this.seq внутри конструктора, это значение отображается в представлении. Поэтому я пытаюсь передать параметры конструктору следующим образом:

ComponentB.ts

new SqvLibComponent(options);

А потом в ComponentA.ts

export class SqvLibComponent {

  public constructor(public op: Options) {
  this.populate(op);
  }
}

Но это дает ошибки об объекте, который я пытаюсь передать.

Answer 1

Попробуйте использовать ngIf, чтобы избежать рендеринга TemplateA до того, как свойство this.seq получит значение.

<ng-container ngIf="seq">
    <templateA></templateA>
</ng-container>

Как гласит угловая документация:

ngIf - структурная директива, которая условно включает шаблон на основе значение выражения приведено к логическому. Когда выражение возвращает значение true, Angular отображает шаблон, предоставленный в и когда false или null, Angular отображает предоставленный шаблон в дополнительном предложении else. Шаблон по умолчанию для предложения else пусто.

UPDATE:

В Angular 7 *ngIf директива должна быть явно указана в вашем модуле, например:

@NgModule({
  imports: [CommonModule],

ИЛИ:

@NgModule({
  imports: [BrowserModule],

Как экспорт BrowserModule CommonModule