Angular中*ngFor仅遍历首个同名street_group数组的问题

问题说明 #

你需要在Angular模板中仅遍历并展示数据结构里第一个section对象下的street_group数组的name字段，但当前*ngFor会遍历所有section下的street_group；尝试使用*ngFor="let section of data.section[0]"时触发类型错误，因为data.section[0]是单个对象而非可迭代数组。

错误原因 #

*ngFor指令要求遍历的数据源必须是可迭代对象（如数组、Map、Set等），而data.section[0]是section数组中的单个对象，不符合NgIterable类型要求，因此抛出类型错误。

解决方案 #

提供两种直接可行的实现方式：

方式1：直接绑定第一个section的street_group数组 #

跳过遍历section的步骤，直接将data.section[0].street_group作为*ngFor的数据源，精准定位到目标数组：

修改HTML模板的内容区域：

<div class="content">
  <mat-list role="list">
    <mat-list-item role="listitem" *ngFor="let streetGroup of data.section[0].street_group | slice:0:2">
      {{streetGroup.name}}
    </mat-list-item>
  </mat-list>
</div>

方式2：通过索引过滤仅保留第一个section #

如果需要保留遍历section的结构，可借助*ngFor的索引变量，通过*ngIf仅渲染第一个section的内容：

<div class="content">
  <mat-list role="list" *ngFor="let section of data.section; let i = index">
    <ng-container *ngIf="i === 0">
      <mat-list-item role="listitem" *ngFor="let streetGroup of section.street_group | slice:0:2">
        {{streetGroup.name}}
      </mat-list-item>
    </ng-container>
  </mat-list>
</div>

空值安全优化 #

为避免数据未加载完成或section数组为空时出现报错，建议添加空值保护：

<div class="content" *ngIf="data.section?.length">
  <mat-list role="list">
    <mat-list-item role="listitem" *ngFor="let streetGroup of data.section[0].street_group | slice:0:2">
      {{streetGroup.name}}
    </mat-list-item>
  </mat-list>
</div>

附用户提供的原始代码 #

数据结构 #

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

内容的提问来源于stack exchange，提问作者allforthenoob