Warum führt die Slice-Pipeline in Angular zum Absturz meines Codes?

Question

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.

Answer 1

奇怪的是，你会得到这个错误，因为 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;