Mengapa saluran paip Slice dalam Angular menyebabkan kod saya ranap?

Question

Baiklah, saya mempunyai komponen ini dan saya mengulangi data. Semuanya hebat tanpa tiub hirisan. Perkara berfungsi secara berbeza apabila saya menambah saluran paip penghirisan untuk mengehadkan output. Sudut menghantar ralat ini Objek jenis 'tidak diketahui'.ngtsc(2571) pada

Ini ialah storan data pada API. Ia dikembalikan sebagai objek seperti ini

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

Ini ialah komponen di mana .mendapatkandata dan kemudian menolak data ke tatasusunan, menjadikannya Boleh Diulang.

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];});
    }
    }

Ini ialah HTML yang berfungsi secara berulang selagi saya tidak menggunakan saluran paip penghirisan.

Ralat berlaku dalam {{street_group.name}}, dengan Sudut menunjukkan bahawa jenis objek adalah "tidak diketahui".

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

Saya ingin menggunakan saluran paip penghirisan untuk mengehadkan keputusan kepada 7 item dalam kumpulan_jalanan kerana terdapat 14. 7 item dalam 2 objek berbeza. Tetapi Angular mencetak keseluruhan 14 dalam kedua-dua objek.

Answer 1

Perkara yang pelik ialah anda mendapat ralat ini kerana jenis semuaData ialah any 因此所有嵌套字段都是 unknown

Untuk membetulkannya, cuma tambahkan sesuatu seperti ini:

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

Juga ambil perhatian bahawa nilai awal harus ditetapkan kepada []. Jika tidak, input akan kelihatan seperti ini:

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