Question

我需要在一个Angular 2站点上使用For循环填充动态数量的Tabs，使用订阅从数据库服务获取数据，我想知道它是否可能。

我的数据集按类分类：A，B和C，它们每个都有一个1和2的子类。所以我想让我的结果动态创建3个标签（标签A，标签B和标签C）。到目前为止，我有这个工作。

然后，我需要每个选项卡，然后显示其子类的数据。截至目前，循环运行3次并提供所需的数据，但每个页面只显示C类数据，因为它是最后一个运行的模型，并且模型更新了所有数据。

以下是我到目前为止的情况。

classdata.component.html

＆＃13;

<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 subclassresults;">
<td>{{subclassresult.Sub_Class_Name}}  </td>
<td>{{subclassresult.Value}}  </td>
</tr>
</tbody>
</table>
</mat-tab>
</mat-tab-group>

＆＃13;

classdata.component.ts

＆＃13;

   // Populate Class Level Data
   this.databaseService.getClass()
   .subscribe(classresults => this.classresults = classresults,
    error => console.log('ERROR!'),
    // Populate Sub-Class Level Data
    () => { for (const classresult of this.classresults) {
      this.selectedClassId = classresult.Class_ID;
      console.log(this.selectedClassId);
      this.databaseService.getSubClass(this.selectedClassId)
      .subscribe(subclassresults => this.subclassresults = subclassresults);
    }
  }
  );

＆＃13;

database.service.ts

＆＃13;

getClass(): Observable<ClassResult[]> {
  const url = 'http://localhost:3000/c';
  const data = ({
  });
  return this._http.post(url, data)
  .pipe(
    map((res) => {
      console.log(res);
      return <ClassResult[]> res;
    })
  );
}


getSubClass(Class_ID): Observable<SubClassResult[]> {
  const url = 'http://localhost:3000/sc';
  const data = ({
    classid: Class_ID
  });
  return this._http.post(url, data)
  .pipe(
    map((res) => {
      console.log(res);
      return <SubClassResult[]> res;
    })
  );
}

＆＃13;

Answer 1

您正在为每个parentClass获取每个子类，但是您将每个结果重新分配给类变量this.subclassresults。基本上你用当前结果覆盖每个先前的结果。这就是为什么每个页面只显示C类数据。

有许多不同的解决方案可以解决这个问题。

在解决方案上，您可能正在使用forkJoin Observable并将您的parentClass的结果与其子类保存在它们自己的对象中：

＆＃13;

this.databaseService.getClass().pipe(
  switchMap(classResults => {
    const subClassRequests = classResults.map(
      classResult => this.dabaseService
        .getSubClass(classResult)
        .pipe(map(subClassResults => {classResult, subClassResults}))
       )
       return forkJoin(subClassRequests)
  })
).subscribe(results => this.results = results);

＆＃13;

results将您的数据保存为数组。

在你的模板中使用它：

＆＃13;

<mat-tab-group>
  <mat-tab *ngFor="let result of results;" label="Class -{{result.classresult.Class_Name}}">
    <table class ="responstable">
      <thead>
        <tr>
          <th>Sub-Class Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let subclassresult of result.subclassresults;">
          <td>{{subclassresult.Sub_Class_Name}}  </td>
          <td>{{subclassresult.Value}}  </td>
        </tr>
      </tbody>
    </table>
  </mat-tab>
</mat-tab-group>

＆＃13;

我实施了一个小型工作演示： StackBlitz Demo

是否可以使用For循环订阅动态填充Angular 2 Material选项卡？

1 个答案: