Javascript 为什么输入变量属性未定义（角度）

我在应用程序组件中从我的服务中获取数据，然后通过@Input将其传递给子组件。当我在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-navbar *ngIf="colorCounts" [colorCounts] = "colorCounts"></app-navbar>
<app-system-status [pciData]="pciData"></app-system-status>

  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);
  }

}

下面是我向下传递数据的app.component.html模板：

ngOnInit() {

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

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

  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);
  }

}

这是我正在抓取数据的子组件，在ngOnInit中执行console.log确实有效，但尝试在模板中使用“red”或将其保存在类中会返回未定义：

ngOnInit() {

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

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

  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);
  }

}

构造函数（专用pciService:pciService，
公共对话：MatDialog，
专用decimalPipe:decimalPipe{}
AMVersion：任何版本；
@输入（）颜色计数：颜色；
openDialog（）：void{
让dialogRef=this.dialog.open（AmVersionDialogComponent{
panelClass:“自定义对话框容器”，
数据：{}
});
（dialogRef.componentInstance）.AMVersion=this.AMVersion；
dialogRef.afterClosed（）.subscribe（结果=>{
log（“对话框已关闭”）；
});
}
恩戈尼尼特（）{
this.pciService.getAMVersion（）
.订阅（（AMInfo）=>{
返回this.AMVersion=AMInfo；
});
var red=this.colorCounts.red；
控制台日志（红色）
console.log（this.colorCounts）；
}
}

---

我知道我可能错过了一些关于生命周期的简单内容。有人能在这里给我指出正确的方向吗？

所有观测值都是异步的，因此在模板

*ngIf

条件中，将检查变量，如果它为null，将返回null，但如果将变量作为

|async

管道，它将始终检查该变量，当变量不为null时，它将显示内容

ngIf

---

*ngIf

只能工作一次！！！他通常不会等待任何http调用和可观察对象。如果您想

*ngIf

等待呼叫，则需要在内部使用

| async

管道

与您在

ngOnInit（）

中订阅并分配给模板中的变量相同。订阅将在模板在屏幕上全部显示后分配这些值。了解异步的含义

您需要知道这是一个样板代码：

ngOnInit() {

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

最好这样做：

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

在模板中：

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

---

Pipe Async将为您订阅一个Observable。

抱歉，系统状态数据加载正常，是我添加了ngIF“colorCounts”的其他数据有问题。您的console.log（红色）和console.log（this.colorCounts）的输入是什么？它们没有定义吗？@Exomus没有，它们实际上是在显示它们应该是的数据。只有当我尝试将它们传递到模板中时，它们才会显示为未定义的，或者在类中定义它们。尝试使用下面的代码更改代码“最好这样做：”你并不是在真正回答问题。主要的一点是为什么他的代码不起作用，然后你可以提出他的代码的替代方案，使它更干净。在这里，我们仍然不知道为什么会有这种行为

*ngIf

只工作一次！！！他通常不会等待任何http调用和可观察对象。如果您想

*ngIf

等待呼叫，则需要在内部使用

| async

管道。