Javascript *ngFor 保持同时访问 2 个具有相同名称的独立array.我只想迭代一个

我正在try 循环访问一个array.问题是数据是嵌套的，并且在一个对象中有两个同名的array.我只想遍历一个array.ANGLE同时迭代这两个array.

我正在try 仅访问和打印street_group数组的第一个实例中的name.ANGING同时从street_group数组两个实例打印name.

这是数据

{
    "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": "-",
        }
        ]
    }, {
        "locale": "-",
        "value": {
            "id": "-",
            "name": "-",
            "country_code": "-"
        },
        "street_group": [{
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }, {
            "id": "-",
            "name": "-",
            "type": "-",
        }
        ]
}]
}

这是我的组件

export class LiveComponent implements OnInit {
 allData: {
    generated_at: string;
    section: {
      street_group: { name: string }[];
      locale: string }[];
    event: {
      id: string;
      useful: { name: string }[];
    };
  }[] | null = null;

    constructor(private http: HttpClient ) {
    }
    ngOnInit(){
this.http.get('http://api.redacted_for_privacy').subscribe(data => {this.allData = [data as any];});
    }
    }

这是我的Html

<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:2">{{street_group.name}}</mat-list-item> 

  </mat-list>
  
</div>


    </mat-tab>
    
  </mat-tab-group> 

我try 向Section数组添加索引号，因为它是包含数组，但这 destruct 了代码.

<mat-list role="list" *ngFor="let section of data.section[0]">个

其中，of表示此错误 Type '{ street_group: { name: string; }[]; }' is not assignable to type 'NgIterable | null | undefined'.ngtsc(2322)

我以为只会呈现第一个array.