Angular 2 Material Tabs能否通过For Loop Subscribe动态填充并正确展示数据？

你遇到的问题很典型——所有Tab都显示最后一个类的子类数据，核心原因是所有Tab都绑定了同一个全局数组subclassresults。在你的循环逻辑里，每次调用this.databaseService.getSubClass()并订阅时，都会把返回的子类数据覆盖到全局的subclassresults上。由于HTTP请求是异步的，循环会快速完成三次请求触发，最后一次请求的结果会覆盖前两次的内容，所以所有Tab最终都显示最后一次请求到的子类数据。

我们需要把每个类对应的子类数据和该类本身关联绑定，而不是用一个全局数组统一存储。具体修复步骤如下：

1. 调整数据结构 #

首先，确保你的ClassResult类型（如果定义了接口）添加一个subclasses属性，用来存储当前类对应的子类数据：

interface ClassResult {
  Class_ID: number;
  Class_Name: string;
  // 添加该属性用于绑定对应子类数据
  subclasses?: SubClassResult[];
}

如果没有定义接口，也可以在获取到类数据后，动态给每个类对象添加这个属性。

2. 修改组件逻辑（classdata.component.ts） #

我们需要把每个类的子类数据赋值给对应classresult的subclasses字段，而非全局变量。这里推荐用RxJS的forkJoin来并行处理所有子类请求，比循环嵌套订阅更高效且易维护：

import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

// ... 其他代码

// Populate Class Level Data
this.databaseService.getClass()
  .subscribe({
    next: (classresults) => {
      this.classresults = classresults;
      // 为每个类创建子类请求的Observable，并关联对应的类对象
      const subclassRequests = classresults.map(classresult => 
        this.databaseService.getSubClass(classresult.Class_ID)
          .pipe(
            map(subclasses => ({ classresult, subclasses }))
          )
      );

      // 并行执行所有子类请求
      forkJoin(subclassRequests).subscribe(results => {
        results.forEach(({ classresult, subclasses }) => {
          // 将子类数据绑定到对应的类对象上
          classresult.subclasses = subclasses;
        });
      });
    },
    error: (error) => console.log('获取类数据失败:', error)
  });

如果你更倾向于保留原循环写法（不使用forkJoin），也可以这样修改：

// Populate Class Level Data
this.databaseService.getClass()
  .subscribe({
    next: (classresults) => {
      this.classresults = classresults;
      for (const classresult of classresults) {
        this.databaseService.getSubClass(classresult.Class_ID)
          .subscribe({
            next: (subclasses) => {
              // 赋值给当前类对象的subclasses字段，而非全局变量
              classresult.subclasses = subclasses;
            },
            error: (err) => console.log(`获取类${classresult.Class_Name}的子类失败:`, err)
          });
      }
    },
    error: (error) => console.log('获取类数据失败:', error)
  });

3. 修改模板（classdata.component.html） #

现在每个Tab对应的classresult已经绑定了自己的subclasses数据，模板中需要遍历当前classresult的subclasses，而非全局的subclassresults：

<mat-tab-group>
  <mat-tab *ngFor="let classresult of classresults;" label="Class -{{classresult.Class_Name}}">
    <table class="responstable">
      <thead>
        <tr>
          <th>Sub-Class Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历当前类绑定的子类数据 -->
        <tr *ngFor="let subclassresult of classresult.subclasses;">
          <td>{{subclassresult.Sub_Class_Name}}</td>
          <td>{{subclassresult.Value}}</td>
        </tr>
      </tbody>
    </table>
  </mat-tab>
</mat-tab-group>

• 避免嵌套订阅：使用forkJoin、concatMap等RxJS操作符能让代码更清晰，也更便于统一处理错误和取消请求。
• 添加加载状态：可以在请求数据时显示加载动画，提升用户等待时的体验。
• 统一错误处理：给子类请求也添加独立的错误处理逻辑，避免单个请求失败影响整体页面渲染。

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