Pourquoi le pipeline Slice dans Angular provoque-t-il le crash de mon code ?

Question

D'accord, j'ai ce composant et j'itère sur les données. Tout va bien sans le tube slice. Les choses fonctionnent différemment lorsque j'ajoute un pipeline de découpage pour limiter la sortie. Angular envoie cette erreur L'objet est de type 'inconnu'.ngtsc(2571) sur

Il s'agit du stockage des données sur l'API. Il est restitué sous forme d'objet comme celui-ci

{
    "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": "-",
        }
        ]
}]
}

C'est le composant où .getdata puis pousse les données vers un tableau, ce qui en fait un 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];});
    }
    }

C'est l'itération HTML qui fonctionne tant que je n'utilise pas le pipeline de découpage.

L'erreur se produit dans {{street_group.name}}, où Angular indique que le type de l'objet est "inconnu".

<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>

Je souhaite utiliser le pipeline de découpage pour limiter les résultats à 7 éléments dans street_group car il y a 14,7 éléments dans 2 objets différents. Mais Angular imprime le 14 entier dans les deux objets.

Answer 1

Ce qui est étrange, c'est que vous obtenez cette erreur car le type de allData est any 因此所有嵌套字段都是 unknown

Pour résoudre ce problème, ajoutez simplement quelque chose comme ceci :

// component.ts
  allData: {
    generated_at: string;
    section: {
      street_group: { name: string }[];
      locale: string }[];
    event: {
      id: string;
      useful: { name: string }[];
    };
  }[] = [];

Notez également que la valeur initiale doit être définie sur []. Sinon, l'entrée devrait ressembler à ceci :

// component.ts
  allData: {
    generated_at: string;
    section: {
      street_group: { name: string }[];
      locale: string }[];
    event: {
      id: string;
      useful: { name: string }[];
    };
  }[] | null = null;