Angular中不使用keyvalue管道如何遍历对象数组获取student2的name展示

首先你提供的JSON结构存在语法错误，student3节点错误放在了student2数组内，修正后的合法结构如下：

{
  "student": {
    "student1": [],
    "student2": [
      {
        "id": "123",
        "name": "boot"
      }
    ],
    "student3": []
  },
  "teacher": {
    "teacher1": [],
    "teacher2": [
      {
        "id": "123456",
        "name": "toto"
      }
    ]
  }
}

以下是无需使用keyvalue管道的实现方案： #

第一步：修改TS文件逻辑 #

首先在组件类中声明存储变量，再调整接口回调的处理逻辑：

// 组件类中声明存储变量
student2List: {id: string, name: string}[] = [];
// 仅需要name字段可单独声明变量存储
student2Names: string[] = [];

get(){
 this.service.getAll().subscribe((data:any) => {
  // 先判断返回数据非空
  if(data && Object.keys(data).length > 0) {
    // 直接取出student2节点数组
    this.student2List = data.student?.student2 || [];
    // 提取所有name字段单独存储
    this.student2Names = this.student2List.map(item => item?.name).filter(Boolean);
  }
 })
}

第二步：页面模板渲染 #

因为student2本身就是数组类型，直接用*ngFor遍历即可，完全不需要用到针对对象遍历的keyvalue管道：

方案1：遍历完整student2数组展示全量信息 #

<div *ngFor="let item of student2List">
  <p>学生ID：{{item.id}}</p>
  <p>学生姓名：{{item.name}}</p>
</div>

方案2：仅遍历提取好的name字段展示 #

<ul>
  <li *ngFor="let name of student2Names">
    学生姓名：{{name}}
  </li>
</ul>

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