我正在從 API 獲取資料并希望為每個物件值顯示選項卡。一切正常，只是在控制臺中出錯。Cannot read properties of undefined (reading 'Projects')
資料按預期正確顯示。我假設它一開始無法讀取它，所以它說它是未定義的。并在獲取資料后出現。
我應該如何擺脫這個錯誤？
HTML：
<mat-tab *ngFor="let object of projects.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
成分：
import { Component, OnInit } from '@angular/core';
import { TablesService } from "../tables/tables.service";
@Component({...})
export class MyComponent implements OnInit {
projects: any;
constructor(public tableService: TablesService)
{
this.tableService.fetchAPI().subscribe((data) => {
this.projects = data;
})
}
ngOnInit(): void {
}
}
uj5u.com熱心網友回復：
發生這種情況是因為projects僅宣告而不初始化，因此在您的 API 呼叫完成并將一些資料放入該變數之前，它將是undefined. 處理這個問題的一種方法是假設projects可能是undefined并使用?（可選鏈運算子）來解決這個問題：
<mat-tab *ngFor="let object of projects?.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
另一種解決方案可能是為該projects屬性提供一個初始值：
projects: any = {};
uj5u.com熱心網友回復：
模板將在服務器回應之前呈現
所以在這里，projects將暫時undefined
<mat-tab *ngFor="let object of projects.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
您可以使用 an*ngIf來防止projects在定義之前渲染此部分。但是，由于您只能放置一個結構運算子，因此您必須在其ng-container周圍添加一個：
<ng-container *ngIf="projects">
<mat-tab *ngFor="let object of projects.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
</ng-container>
或者你也可以添加一個?after projects，像這樣：
<mat-tab *ngFor="let object of projects?.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339124.html