Angular中如何用NgFor遍历嵌套JSON数组，获取category[]内部内容？

问题还原 #

你现在在Angular表格的category列中只能看到[object Object], [object Object], [object Object]，想要通过*ngFor访问categories数组里的嵌套内容（比如description），但尝试的写法没成功，同时组件里的异步请求处理也有小疏漏。

第一步：修复Component中的异步请求逻辑 #

你的ngOnInit里处理异步请求时，没有正确管理Promise的执行顺序，而且赋值逻辑有问题，导致可能表格渲染时categories数据还没加载完成。调整后的代码如下：

ngOnInit() {
  this.componentService.getNewlist()
    .then(result => {
      if(!result){
        return;
      }
      this.getresult = result;
      // 创建Promise数组来等待所有分类请求完成
      const categoryPromises = this.getresult.map(item => {
        return this.radiosService.getCategid(item.id)
          .then(categories => {
            // 给每个item赋值categories数组
            item.categories = categories;
            return categories;
          });
      });
      
      // 等待所有分类请求都完成，确保数据准备好再渲染
      return Promise.all(categoryPromises);
    })
    .catch(reason => {
      console.log(reason);
    });
}

关键调整点：

• 用map替代forEach生成Promise数组，配合Promise.all等待所有异步请求完成，避免表格渲染时数据还未加载
• 确保每个item的categories被正确赋值为返回的分类数组

第二步：修改HTML模板遍历categories内容 #

现在数据已经正确加载，接下来在表格的mat-cell里用*ngFor遍历radios.categories数组，显示你需要的属性（比如description）。这里有几种写法可选：

写法1：用分隔符逐个显示分类内容

<ng-container matColumnDef="category">
  <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
  <mat-cell *matCellDef="let radios">
    <!-- 遍历每个category，显示description，用逗号分隔 -->
    <span *ngFor="let category of radios.categories; let last = last">
      {{ category.description }}
      <span *ngIf="!last">, </span>
    </span>
  </mat-cell>
</ng-container>

写法2：处理多层嵌套的分类结构

如果你的category里还有子分类（比如结构是{ description: string, subCategories: Array<{name: string}> }），可以嵌套*ngFor：

<ng-container matColumnDef="category">
  <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
  <mat-cell *matCellDef="let radios">
    <div *ngFor="let category of radios.categories">
      <strong>{{ category.description }}</strong>
      <!-- 遍历子分类 -->
      <div *ngFor="let subCat of category.subCategories" style="margin-left: 16px;">
        {{ subCat.name }}
      </div>
    </div>
  </mat-cell>
</ng-container>

为什么之前的写法没成功？
你之前尝试的{{radios.categories.item.description}}是错误的，因为radios.categories是数组，需要先通过*ngFor遍历出每个category对象，再访问它的属性，而不是直接用.item。

额外提示：处理数据未加载的状态 #

如果分类数据加载需要时间，可以添加加载状态提示，提升用户体验：

<mat-cell *matCellDef="let radios">
  <ng-container *ngIf="radios.categories; else loading">
    <span *ngFor="let category of radios.categories; let last = last">
      {{ category.description }}
      <span *ngIf="!last">, </span>
    </span>
  </ng-container>
  <ng-template #loading>
    <span>加载中...</span>
  </ng-template>
</mat-cell>

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