Я хотел бы отобразить данные из моего файла 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, я получаю данные.
Затем...
файл 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
не является неопределенным?
Спасибо за вашу помощь и ваше время
Данные извлекаются асинхронно, поэтому при первом рендеринге компонента 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>