好的,我有這個元件,並且正在迭代資料。沒有切片管一切都很棒。當我添加切片管道來限制輸出時,事情會發生不同的變化。 Angular 發送此錯誤 Object is of type 'unknown'.ngtsc(2571) 上
這是 API 上的資料儲存。它像這樣作為一個物件返回
{ "generated_at": "-", "schema": "-", "event": { "id": "-", "scheduled": "-", "value": false, "timing": { "type": "-", }, "season": { "id": "-", "name": "-", "start_date": "-", "end_date": "-", "year": "-", }, "cycle": { "id": "", "name": "-", "car": { "id": "-", "name": "-" }, "category": { "id": "-", "name": "-" }, "type": "-", "value": "-" }, "useful": [{ "id": "-", "name": "-", "value": "-", "value2": "-", "value3": "-", "value4": "-" }, { "id": "-", "name": "-", "value1": "-", "value2": "-", "value3": "-", "value4": "-" }], "venue": { "id": "-", "name": "-", "city_name": "-", "country_name": "-", "map_coordinates": "--", "country_code": "-", "values": [{ "name": "-" }, { "name": "-" }] } }, "section": [{ "locale": "-", "value": { "id": "-", "name": "-", "country_code": "-" }, "street_group": [{ "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", } ] }, { "locale": "-", "value": { "id": "-", "name": "-", "country_code": "-" }, "street_group": [{ "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", }, { "id": "-", "name": "-", "type": "-", } ] }] }
這是元件,其中.get數據,然後將數據推送到數組,使其成為可迭代。
export class LiveComponent implements OnInit { allData: any = null; constructor(private http: HttpClient ) { } ngOnInit(){ this.http.get('http://api.redacted_for_privacy').subscribe(data => {this.allData = [data];}); } }
只要我不使用切片管道,這就是迭代工作的 HTML。
錯誤發生在{{street_group.name}},其中 Angular 表示物件的類型為「未知」。
<mat-tab-group> <mat-tab *ngFor="let data of allData" label="{{data.event.useful[0].name}}"> >! The part below is broken <div class="content"> <mat-list role="list" *ngFor="let section of data.section"> <mat-list-item role="listitem" *ngFor="let street_group of section.street_group | slice:0:10">{{street_group.name}}</mat-list-item> </mat-list> </div> </mat-tab> </mat-tab-group>
我想使用切片管道將結果限制為 street_group 中的 7 個項目,因為 2 個不同的物件中有 14. 7 個項目。但 Angular 在兩個物件中都列印了整個 14。
P粉2310799762024-03-22 21:09:16
奇怪的是,你會得到這個錯誤,因為 allData 的型別是 any
因此所有巢狀欄位都是 unknown
為了解決這個問題,只需加入以下內容:
// component.ts allData: { generated_at: string; section: { street_group: { name: string }[]; locale: string }[]; event: { id: string; useful: { name: string }[]; }; }[] = [];
另請注意,初始值應設定為 []
。否則,輸入應該像這樣:
// component.ts allData: { generated_at: string; section: { street_group: { name: string }[]; locale: string }[]; event: { id: string; useful: { name: string }[]; }; }[] | null = null;