Angular中如何遍历含嵌套数组的对象并在表格中正确展示？

针对你的需求，这里提供三种可行的实现方案，解决直接显示[object]或重复展示兄弟姓名的问题：

方法1：模板内直接处理（最简方案） #

无需额外组件逻辑，直接在表格单元格中通过数组方法提取姓名并拼接成字符串：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>兄弟姐妹</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let student of Student">
      <td>{{ student.name.trim() }}</td>
      <td>{{ student.age }}</td>
      <td>
        {{ student.sibling.length > 0 ? student.sibling.map(s => s.name).join(', ') : '无' }}
      </td>
    </tr>
  </tbody>
</table>

• map(s => s.name)：将sibling数组转换为仅包含姓名的数组
• join(', ')：用逗号分隔姓名，生成单个字符串
• 空数组时显示“无”，优化用户体验；trim()处理姓名中的多余空格（如Matteo后的空格）

方法2：组件内预处理数据 #

若不想在模板中写过多逻辑，可在组件内提前处理好需要展示的兄弟姓名字符串：

// 组件.ts文件中
processedStudents = this.Student.map(student => ({
  ...student,
  siblingNames: student.sibling.map(s => s.name).join(', ') || '无',
  name: student.name.trim()
}));

模板中直接使用预处理后的数组：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>兄弟姐妹</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let student of processedStudents">
      <td>{{ student.name }}</td>
      <td>{{ student.age }}</td>
      <td>{{ student.siblingNames }}</td>
    </tr>
  </tbody>
</table>

方法3：自定义管道（高复用性） #

如果多个页面需要处理类似的数组转姓名字符串场景，可自定义管道实现复用：

1. 生成管道文件：

ng generate pipe siblingNames

2. 实现管道逻辑（sibling-names.pipe.ts）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'siblingNames'
})
export class SiblingNamesPipe implements PipeTransform {
  transform(siblings: {name: string}[]): string {
    if (!siblings || siblings.length === 0) {
      return '无';
    }
    return siblings.map(s => s.name).join(', ');
  }
}

3. 模板中使用管道：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>兄弟姐妹</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let student of Student">
      <td>{{ student.name.trim() }}</td>
      <td>{{ student.age }}</td>
      <td>{{ student.sibling | siblingNames }}</td>
    </tr>
  </tbody>
</table>

关于你之前遇到的问题说明 #

• 直接使用Student.sibling显示[object] [object]：因为数组对象直接转为字符串时，默认输出格式就是[object Object]，必须提取内部的name属性才能正确展示
• 嵌套ngFor重复展示：因为每遍历一个兄弟就生成一个新的<div>，导致单元格内容被拆分显示，而需求是将所有兄弟姓名合并为一个字符串展示

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