Как я могу вставить несколько итераций одного и того же массива в больший массив в Angular для использования в динамическом количестве вкладок?

Question

Я использую цикл for для создания массива, а затем мне нужно поместить этот массив в больший массив.Я искал вокруг, и у меня это работает, но большой массив просто содержит 3 неопределенных объекта.

Код для цикла for:

FinalArray: any[] = [];

    this.databaseService.getclass(id, this.selectedSeries, this.selectedTierNbr, this.selectedAmount)
    .subscribe(classresults => this.classresults = classresults,
     error => console.log('ERROR!'),
     // Populate Bank Level Data using onComplete Observable function
     () => { for (const classresult of this.classresults) {
       this.selectedClassId = classresult.Class_ID;
       console.log(this.selectedClassId);
       this.databaseService.getbank(id, this.selectedS, this.selectedTierNbr, this.selectedAmount, this.selectedClassId)
       .subscribe(bankresults => this.bankresults = bankresults);
       this.FinalArray.push(this.bankresults);
       console.log(this.FinalArray);
     }
   }

Вот класс экспорта массива в службе базы данных:

export class ClassResult {
  Id: number;
  Name: string;
  Group_Name: string;
  S_Id: number;
  S_Name: string;
  Class_ID: number;
  S_Class: string;
  Tier_Nbr: number;
  Tier_Name: string;
  Amount: number;
}

export class BankResult {
  Id: number;
  Name: string;
  Group_Name: string;
  S_Id: number;
  S_Name: string;
  Class_ID: number;
  S_Class: string;
  Tier_Nbr: number;
  Tier_Name: string;
  Amount: number;
  Bank_Name: string;
  Bank_Id: number;
}

Конечная цель, которую я ищу, состоит в том, чтобы я мог ссылаться на эти данные на динамически создаваемом количестве вкладок материала.Надеясь выглядеть так:

<mat-tab-group>
<mat-tab *ngFor="let classresult of classresults "
label="S Class -  {{classresult._S_Class}}">
<table class ="responstable">
        <thead>
            <tr>
                <th>test</th>
                <th>test</th>
            </tr>
        </thead>
    <tbody>
        <tr *ngFor="let bankresult of finalarray.bankresults">
        <td>{{bankresult.S_Class}} </td>
        <td>{{bankresult.Tier_Name}} </td>
        </tr>
    </tbody>
    </table>
</mat-tab>
</mat-tab-group>

Я также пытался выполнить это с помощью switchMap, но не смог заставить его работать.

this.databaseService.getClass(id, this.selectedS, this.selectedTierNbr, this.selectedAmount).pipe(
    switchMap(classresults => {
      const bankrequests = classresults.map(
        classresult => this.databaseService
          .getBank(id, this.selectedS, this.selectedTierNbr, this.selectedAmount, this.selectedClassId)
          .pipe(map(bankresults => {classresult, bankresults}))
         );
         return forkJoin(bankrequests);
         console.log(bankrequests);
    })
  ).subscribe(results => this.results = results);

Answer 1

Это из-за асинхронного поведения наблюдаемой подписки.

Попробуйте это.

this.databaseService.getclass(id, this.selectedSeries, this.selectedTierNbr, this.selectedAmount)
.subscribe(
    (classresults) => {
        this.classresults = classresults;
        for (const classresult of this.classresults) {
            this.selectedClassId = classresult.Class_ID;
            console.log(this.selectedClassId);
            this.databaseService.getbank(id, this.selectedS, this.selectedTierNbr, this.selectedAmount, this.selectedClassId)
                .subscribe((bankresults) => {
                    this.bankresults = bankresults;
                    this.FinalArray.push(this.bankresults);
                    console.log(this.FinalArray);
                });
        }
    },
    (error) => {
        console.log('ERROR!')
    });