Почему свойства моей входной переменной не определены (угловые)

Question

Я получаю данные из моей службы в компоненте приложения, а затем передаю их дочернему компоненту через @Input. когда я console.log данных в ngOnInit, он обнаруживается в дочернем компоненте, но когда я пытаюсь передать его в переменную и использовать его в дочернем шаблоне, он возвращается неопределенным, и я не уверен, почему.

Вот где я вызываю мой сервис в app.component.ts, данные о проблемах - это this.colorcounts. Вход в консоль здесь, внутри ngOnInit, показывает правильные данные. У colorCounts есть 3 свойства: красный, желтый и зеленый:

ngOnInit() {

    this.pciService.getPciInfo()
            .subscribe((pciInfo) => {
              this.spinner.hide();
              this.pciData = pciInfo.sorted,
              this.colorCounts = pciInfo.counts;
            });

Вот шаблон app.component.html, в который я передаю данные:

<app-navbar *ngIf="colorCounts" [colorCounts] = "colorCounts"></app-navbar>
<app-system-status [pciData]="pciData"></app-system-status>

Вот дочерний компонент, где я собираю данные, делаю console.log в ngOnInit, но попытка использовать «красный» в шаблоне или сохранить его в классе возвращается неопределенным:

  constructor(private pciService: PciService,
              public dialog: MatDialog,
              private decimalPipe: DecimalPipe) { }

  AMVersion: any;
  @Input() colorCounts: Colors;


  openDialog(): void {
    let dialogRef = this.dialog.open(AmVersionDialogComponent, {
      panelClass: 'custom-dialog-container',
      data: {}
    });

    (<AmVersionDialogComponent>dialogRef.componentInstance).AMVersion = this.AMVersion;
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }


  ngOnInit() {
    this.pciService.getAMVersion()
    .subscribe((AMInfo) => {
     return this.AMVersion = AMInfo;
    });
    var red = this.colorCounts.red;
    console.log(red)
    console.log(this.colorCounts);
  }

}

Я знаю, что, вероятно, упускаю что-то простое в отношении жизненного цикла. Кто-нибудь может указать мне правильное направление здесь?

Answer 1

Все наблюдаемые являются асинхронными, поэтому в шаблоне *ngIf условие будет проверять переменную, и если она равна нулю, будет возвращать ноль, но если вы передадите переменную в виде | async, она будет проверять эту переменную все время, и когда переменная будет выглядеть не равной нулюпокажет контент ngIf.

*ngIf работает только один раз !!! Он не ждет анни http-звонков и Observables делают обычные звонки. Если вы хотите *ngIf ждать звонков, вам нужно использовать | async pipe внутри.

То же, что вы подписываетесь на него в ngOnInit() и присваиваете переменные в шаблоне. Подписка назначит эти значения позже, когда шаблон будет отображен на экране. Прочтите о том, что означает асинхронность.

Вам нужно знать, что это стандартный код:

ngOnInit() {

    this.pciService.getPciInfo()
            .subscribe((pciInfo) => {
              this.spinner.hide();
              this.pciData = pciInfo.sorted,
              this.colorCounts = pciInfo.counts;
            });

Лучше сделать это так:

ngOnInit() {
this.pciInfo$ = this.pciService.getPciInfo()
}

intemplate:

<ng-container *ngIf="pciInfo$ | async as pciInfo">
<app-navbar [colorCounts]="picInfo.counts"></app-navbar>
</ng-container>

Pipe Async подпишется для вас на Observable.