Невозможно прочитать свойства неопределенного (чтение «PP»)

Я хотел бы отобразить данные из моего файла JSON.

Вот идея информации, которая находится в JSON => http://jsonblob.com/954388771009478656

В DTA > PP я просто хочу отобразить переменную NOMFAMILLE.

У меня есть сообщение об ошибке:

Cannot read properties of undefined (reading 'PP')

В HTML у меня есть это:

 <td class = "text-center"> {{ dta.PP.NOMFAMILLE}} </td>

В ТС,

dta ? : Dta;

private getDta(): void {
    let searchDta = new SearchDta(parseInt(this.registreNational + ''), parseInt(this.fiscalYear + ''), parseInt(this.country + ''));
    this.service.getDta(searchDta).pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.dta = res.DTA;
            console.info("Data RES ");
            console.info(this.dta)
        }
    });
}

Я сделал console.info, я получаю данные.

Невозможно прочитать свойства неопределенного (чтение «PP»)

Затем...

файл search-dta.response.ts

export interface SearchDtaResponse extends ApiResponse {

    DTA: Dta;
}

export interface Dta {
    PP:  PersonnePhysiqueDta;
    PTF_DTA: PortefeuilleDta[] 

}
export interface PortefeuilleDta {
    CLER: string;
    PAYS: number;
    EXERCICE: number;
    STATUTDTA: number;
    NUMEROSUIVI: number;
}

export interface PersonnePhysiqueDta {
    NOMFAMILLE: string; 
    NUMEROREGISTRENATIONAL: number;
    NATIONALITE: string;

}

файл search-dta.ts

export class SearchDta {
    registreNational: number;
    fiscalYear: number;
    country: number; 

    constructor(
        registreNational: number = 0,
        fiscalYear: number = 0,
        country: number = 0, 
    ) {
        this.registreNational = registreNational;
        this.fiscalYear =  fiscalYear;
        this.country = country

    }
}

Я не понимаю, почему объект PP не является неопределенным?

Невозможно прочитать свойства неопределенного (чтение «PP»)

Спасибо за вашу помощь и ваше время

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Данные извлекаются асинхронно, поэтому при первом рендеринге компонента this.dta равно undefined, отсюда и ошибка. Вы можете смягчить это, не отображая td, пока данных нет:

<td class = "text-center" *ngIf = "this.dta"> {{ dta.PP.NOMFAMILLE}} </td>

Или вы можете даже добавить дополнительный тег ng-content для самого значения и поставить ngIf на него (чтобы таблица выглядела последовательно).

<td class = "text-center">
  <ng-content *ngIf = "this.dta">{{ dta.PP.NOMFAMILLE}}</ng-content>
</td>

Другим решением этой проблемы является использование файла необязательный оператор цепочки?.

<td class = "text-center" *ngIf = "this.dta"> {{ dta?.PP?.NOMFAMILLE}} </td>

Другие вопросы по теме