时间戳

首页 > 解决方案 > 无法准备好未定义的自定义组件的属性

angular - 无法准备好未定义的自定义组件的属性

问题描述

我有一个自定义<app-ibd-payment>组件。我在应用程序的两个地方使用它，它在一个地方工作正常，但在另一个地方，它会抛出错误：

<app-ibd-payment-details [intermediaryBankInfo]="banks.intermediaryBankInfo"   
  *ngIf="banks.intermediaryBankInfo != null">
</app-ibd-payment-details>

SupplierDetailsComponent.html:3676 错误类型错误：无法读取 Object.eval [as updateDirectives] 处未定义的属性“intermediaryBankInfo”（SupplierDetailsComponent.html:3693）

标签： angular

解决方案

这意味着banks未定义。您应该向您的支票添加支票，*ngIf以确保您可以在其上调用属性。

<app-ibd-payment-details [intermediaryBankInfo]="banks.intermediaryBankInfo"   
  *ngIf="banks && banks.intermediaryBankInfo != null">
</app-ibd-payment-details>

如果您banks在 HTML 中的其他位置调用属性，则可以将banks条件移到更高级别。

<ng-container *ngIf="banks">
  <h2>{{banks.title}}</h2>

  <app-ibd-payment-details [intermediaryBankInfo]="banks.intermediaryBankInfo"   
    *ngIf="banks.intermediaryBankInfo != null">
  </app-ibd-payment-details>
</ng-container>

如果您使用的是 Angular 9，则可以通过在可能是或?的属性之后放置 a 来使用可选链接。nullundefined

<app-ibd-payment-details [intermediaryBankInfo]="banks.intermediaryBankInfo"   
  *ngIf="banks?.intermediaryBankInfo != null">
</app-ibd-payment-details>

推荐阅读