Невозможно подготовить свойство неопределенного пользовательского компонента

Question

У меня есть пользовательский <app-ibd-payment> компонент. Я использую его в двух местах приложения, он отлично работает в одном месте, но в другом месте, выдает ошибку:

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

SupplierDetailsComponent. html: 3676 ОШИБКА TypeError: Невозможно прочитать свойство'mediaryBankInfo 'из неопределенного в Object.eval [как updateDirectives] (SupplierDetailsComponent. html: 3693)

Answer 1

Это означает, что 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, вы можете использовать необязательную цепочку, поместив ? после свойства, которое может быть null или undefined.

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

Answer 2

Вы должны поместить *ngIf к [intermediaryBankInfo] входу. Вам также необходимо подтвердить banks.

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