如何将API获取数据渲染到Angular Material卡片及多数据不显示问题排查

问题根因 #

你当前代码的核心问题是存储应用数据的datr变量每次接口请求成功后都会被直接覆盖，而非追加新数据：

• 遍历应用ID发起多次aplicacioninformacion请求时，每次请求成功都执行this.datr =(Object.values(Applicationdata))，后返回的请求结果会直接覆盖之前的结果
• 最终datr数组中只会保留最后一次请求返回的应用数据，因此页面仅渲染1张卡片

修复方案 #

第一步：优化组件逻辑 #

建议使用RxJS的switchMap+forkJoin处理并行请求，避免嵌套订阅导致的内存泄漏风险，同时统一收集所有应用数据：
首先在组件类中声明datr为数组类型：

// 组件类中先声明datr
datr: any[] = [];

然后修改ngAfterViewInit中的调用逻辑：

import { forkJoin, switchMap } from 'rxjs';

ngAfterViewInit() {
  let userInfo = JSON.parse(localStorage.getItem("user"));
  const user = new User();
  user.email = userInfo.email;
  user.roles = userInfo.roles;
  this.userService.userinformacion(user).pipe(
    switchMap((userdata: any) => {
      // 生成所有应用详情的请求Observable数组
      const appRequests = userdata.user.registrations.map(reg => {
        const application = new ApplicationViewModel();
        application.id = reg.applicationId;
        return this.userService.aplicacioninformacion(application);
      });
      // 并行执行所有请求，统一返回所有结果
      return forkJoin(appRequests);
    })
  ).subscribe((appDataList: any[]) => {
    // 统一处理所有返回的应用数据，赋值给datr
    this.datr = appDataList.map(item => Object.values(item)).flat();
    // 如果你的Applicationdata本身就是单个应用对象，不需要Object.values，直接写this.datr = appDataList即可
  })
}

如果你不想修改原有请求逻辑，也可以选择最简单的修改方式：将赋值改为追加到数组：

// 原有请求逻辑里把this.datr = xxx 替换为：
this.datr.push(...Object.values(Applicationdata));

第二步：验证模板逻辑 #

你现有的HTML模板无需修改，*ngFor会自动遍历datr数组渲染所有卡片。

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