Можно ли динамически заполнять вкладки Angular 2 Material For Loop Subscribe?

Question

Мне нужно заполнить динамическое количество вкладок на сайте Angular 2, используя цикл For, который использует подписку для получения данных из службы базы данных, и мне интересно, возможно ли это вообще.

МойНабор данных разбит по классам: A, B и C, и каждый из них имеет подкласс 1 и 2. Поэтому я хотел бы, чтобы мои результаты динамически создавали 3 вкладки (вкладка A, вкладка B и вкладка C).Пока у меня это работает.

Затем мне нужно, чтобы каждая из этих вкладок отображала данные своих подклассов.На данный момент цикл выполняется 3 раза и предоставляет необходимые данные, но на каждой странице просто отображаются данные для класса C, поскольку он выполнялся последним, и модель обновляется со всеми своими данными.

Нижечто у меня есть до сих пор.

classdata.component.html

<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>

classdata.component.ts

   // 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);
    }
  }
  );

database.service.ts

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;
    })
  );
}

Answer 1

Вы извлекаете каждый подкласс для каждого parentClass, но вы переназначаете каждый результат в переменную класса this.subclassresults.В основном вы перезаписываете каждый предыдущий результат текущим результатом.Вот почему на каждой странице просто отображаются данные для класса C.

Существует множество различных решений, как вы можете решить эту проблему.

В качестве решения вы можете использовать forkJoin Observable и сохранить результатвашего parentClass с их подклассами в их собственном объекте:

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);

results содержит ваши данные в виде массива.

И в вашем шаблоне используйте его так:

<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>

Я реализовал небольшую рабочую демонстрацию: StackBlitz Demo