为啥我的输入变量属性未定义（Angular）

Posted 2023-03-13

【中文标题】为啥我的输入变量属性未定义（Angular）

【英文标题】：Why are my input variable properties undefined (Angular)为什么我的输入变量属性未定义（Angular）

【发布时间】：2020-01-30 22:59:26

【问题描述】：

我在应用程序组件中从我的服务中获取数据，然后通过@Input 将其传递给子组件。当我在 ngOnInit 中 console.log 数据时，它确实显示在子组件中，但是当我尝试将它传递给变量并在子模板中使用它时，它会返回未定义，我不知道为什么。

这是我在 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>

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

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

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

【问题讨论】：

抱歉，系统状态数据加载正常，这是我添加 ngIF "colorCounts" 的其他数据有问题。

你的 console.log(red) 和 console.log(this.colorCounts) 的输入是什么？它们是未定义的吗？

@Exomus 不，他们实际上是在显示应该显示的数据。只有当我尝试将它们传递给模板时，它们才会显示未定义，或者在类中定义它们。

【参考方案1】：

所有 Observables 都是异步的，所以在模板 *ngIf 中条件将检查变量，如果它为 null 将返回 null 但如果您将变量作为 | async 管道，它将一直检查此变量，并且当变量出现时不为空将显示内容ngIf。

*ngIf 只工作一次！！！他不等待 anny http 调用，并且 Observables 正在做一个平常的事情。如果你想*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 只工作一次！！！他不等待 anny http 调用，并且 Observables 正在做一个平常的事情。如果你想*ngIf等待调用你需要使用| async里面的管道。