Angular提取数组对象嵌套roles属性并添加至新数组展示

我来帮你搞定这个提取角色并展示的需求，咱们一步步调整代码：

1. 先修正模型定义（关键！） #

你当前的AllUsers接口里allUsers定义成string[]是不对的，因为实际返回的是包含roles属性的用户对象数组。咱们先定义正确的类型：

// 先定义单个用户的接口，根据实际字段补充其他属性（比如id、username等）
export interface User {
  roles: string[]; // 假设roles是字符串数组，比如["admin", "editor"]
  // 其他用户字段：username: string; id: number; 等等
}

export interface AllUsers { 
  allUsers: User[]; // 改成User类型的数组
}

2. 调整组件代码，提取角色到roleName数组 #

在获取到用户数据后，用map方法遍历数组，把每个用户的roles属性提取出来存入roleName：

import { User, AllUsers } from './你的模型文件路径';

export class AllUserComponent implements OnInit { 
  allUsers: User[]; // 改用正确的User类型
  roleName: string[][] = []; // 每个元素对应一个用户的roles数组

  constructor(private userService: UserService) {} 

  ngOnInit() { 
    this.userService.getAll().subscribe(data => { 
      this.allUsers = data.allUsers; 
      // 提取每个用户的roles到roleName数组
      this.roleName = this.allUsers.map(user => user.roles);
      console.log('用户列表:', this.allUsers);
      console.log('角色列表:', this.roleName);
    }); 
  }
}

3. 在HTML表格中展示角色 #

用*ngFor遍历用户，通过索引对应roleName数组，再用join(', ')把数组转成友好的逗号分隔字符串：

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>角色</th>
      <!-- 其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 遍历用户列表，同时获取索引i -->
    <tr *ngFor="let user of allUsers; let i = index">
      <td>{{ user.username }}</td>
      <!-- 展示对应索引的角色，转成逗号分隔的文本 -->
      <td>{{ roleName[i].join(', ') }}</td>
    </tr>
  </tbody>
</table>

小提示：其实可以不用单独维护roleName数组 #

如果只是为了展示，直接在模板里访问user.roles会更简洁，省去维护额外数组的麻烦：

<td>{{ user.roles.join(', ') }}</td>

这样就不需要roleName数组了，代码更清爽~

内容的提问来源于stack exchange，提问作者Błażej Witczak