Okay, ich habe diese Komponente und iteriere die Daten. Ohne Slicetube ist alles super. Die Dinge funktionieren anders, wenn ich eine Slicing-Pipeline hinzufüge, um die Ausgabe zu begrenzen. Angular sendet diesen Fehler Object is of type 'unknown'.ngtsc(2571) auf
Dies ist die Datenspeicherung auf der API. Es wird als Objekt wie dieses zurückgegeben
{
"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": "-",
}
]
}]
}
Dies ist die Komponente, in der .Daten abgerufen und dann in ein Array übertragen werden, wodurch es zu einem Iterable wird.
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];});
}
}
Dies ist der HTML-Code, der iterativ funktioniert, solange ich die Slicing-Pipeline nicht verwende. Der Fehler tritt in
{{street_group.name}} auf, wobei Angular angibt, dass der Typ des Objekts „unbekannt“ ist.
<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>
Ich möchte die Slicing-Pipeline verwenden, um die Ergebnisse auf 7 Elemente in street_group zu beschränken, da es 14, 7 Elemente in 2 verschiedenen Objekten gibt. Aber Angular druckt die gesamten 14 in beiden Objekten.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
奇怪的是，你会得到这个错误，因为 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;