为什么 Angular 中的 Slice 管道会导致我的代码崩溃？

Question

好的，我有这个组件，并且正在迭代数据。没有切片管一切都很棒。当我添加切片管道来限制输出时，事情会发生不同的变化。 Angular 发送此错误 Object is of type 'unknown'.ngtsc(2571) 上

这是 API 上的数据存储。它像这样作为一个对象返回

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

这是组件，其中.get数据，然后将数据推送到数组，使其成为可迭代。

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

只要我不使用切片管道，这就是迭代工作的 HTML。

错误发生在{{street_group.name}}，其中 Angular 表示对象的类型为“未知”。

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

我想使用切片管道将结果限制为 street_group 中的 7 个项目，因为 2 个不同的对象中有 14. 7 个项目。但 Angular 在两个对象中都打印了整个 14。

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;