Okay, I have this component and I'm iterating over the data. Everything is great without the slice tube. Things work differently when I add a slicing pipeline to limit the output. Angular sends this error Object is of type 'unknown'.ngtsc(2571) on
This is the data storage on the API. It is returned as an object like this
{
"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": "-",
}
]
}]
}
This is the component which .gets the data and then pushes the data to an array, making it an Iterable.
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];});
}
}
This is the HTML iteration works for as long as I don't use the slicing pipeline.
The error occurs at {{street_group.name}}, where Angular indicates that the type of the object is "unknown".
<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>
I want to use the slicing pipeline to limit the results to 7 items in street_group since there are 14. 7 items in 2 different objects. But Angular prints the whole 14 in both objects.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The weird thing is that you get this error because allData is of type
anyso all nested fields areunknownTo fix this, just add the following:
// component.ts allData: { generated_at: string; section: { street_group: { name: string }[]; locale: string }[]; event: { id: string; useful: { name: string }[]; }; }[] = [];Also note that the initial value should be set to
[]. Otherwise, the input should look like this:// component.ts allData: { generated_at: string; section: { street_group: { name: string }[]; locale: string }[]; event: { id: string; useful: { name: string }[]; }; }[] | null = null;