Как отображать значения в Angular 8 показывает ОШИБКА TypeError: Невозможно прочитать свойство 'имя_проекта' из неопределенного

Question

Моя кодировка ts-кода:

this.api.getPay(this.donationId).subscribe(
    data => {
        this.paymentData = data;
        this.paymentDetails = this.paymentData.donationDetails[0];
    }
)

Мой HTML-код похож на

Project :   <strong>{{paymentDetails.project_name}}</strong><br/>

Status:     <strong>{{paymentDetails?.status}}</strong><br/>

Теперь будут отображаться детали project_name и Status. Консоль получает "ERROR TypeError: Cannot read property 'project_name' of undefined"

Если я добавил "?"как

{{paymentDetails?.project_name}}

Подробности не отображаются. Но в консоли нет ошибок.

Этот же метод кодирования хорошо работает в Angular 5 / 6.

Любой специальный метод для Angular 8 ???

Answer 1

Используйте

changeDetection: ChangeDetectiongStrategy.OnPush

согласно https://alligator.io/angular/change-detection-strategy/, это решит ошибку

Answer 2

При первом отображении представления переменные не устанавливаются (будут неопределенными);

Как только ваша служба возвращает ответ на вызов this.api.getPay(this.donationId), переменные устанавливаются на то, что им нужно.

ваши варианты:

1) поместите ngIf вокруг блока с переменными в вашем шаблоне:

<ng-content *ngIf= "!!paymentDetails">
Project :   <strong>{{paymentDetails.project_name}}</strong><br/>

Status:     <strong>{{paymentDetails?.status}}</strong><br/>
</ng-content>

2) Измените контроллер, чтобы установить переменные какНаблюдаемые и использовать асинхронный канал:

this.getPay$ = this.api.getPay(this.donationId)

и

Project :   <strong>{{(getPay$ | async).paymentDetails.project_name}}</strong><br/>

Status:     <strong>{{(getPay$ | async).paymentDetails.status}}</strong><br/>