Как подписаться внутри цикла for rx и сохранить полученные значения в одном массиве

Question

Я пытаюсь отобразить сохранить значение в массиве из нескольких переключателей кнопок в режиме RX.

Я пытался использовать mergeMap, а затем forkJoin, но не повезло

Вот пример:

HTML:

<mat-button-toggle-group
      #group="matButtonToggleGroup"
      multiple="true"
      (change)="change($event)">
        <mat-button-toggle
          *ngFor="let currency of currencies"
          [value]="currency">
          {{ currency }}
        </mat-button-toggle>
</mat-button-toggle-group>

Пример значения валюты:

Переключить кнопку USD

[ «USD»]

Переключить кнопку PH

[«USD», «PH»]

TS:

instruments: Instruments = []
 change(currency: any): void {
    // Currency values is: ["USD", "PH"]
    for (var i = 0; i < currency.value.length; i++) {
      this.instrumentService
        .getRepoCurrency(currency.value[i])
        .subscribe(repo => {
          // repo is of type Response 
          this.instruments = repo.json();
        });
    }
  }

Я ожидал, что результат будет:

[{USD1},{USD2}..., {PH1}, {PH2}...]

но фактический вывод на консоль

[{USD1},{USD2}..]
[{PH1}, {PH2}..]

Answer 1

Почему бы вам не написать новую функцию для добавления валюты в массив каждый раз, когда вы нажимаете кнопку валюты. Затем привяжите эту функцию к событию click.

instruments: Instruments = [];

change(currency): void {
    this.instruments.push(currency);
}

Тогда в вашем HTML сделайте вот так

<mat-button-toggle
      *ngFor="let currency of currencies"
      [value]="currency" (click)="change(currency)">
      {{ currency }}
</mat-button-toggle>

Теперь это добавит соответствующую валюту в ваш массив. Надеюсь, это поможет.

Answer 2

попробуйте так, используйте forkJoin и Spread Syntax. Поскольку вы перебираете массив правильно, лучше использовать forkJoin

change(currency: any): void {
// Currency values is: ["USD", "PH"]
  let currencyForkArray:any[]=[];
  for (var i = 0; i < currency.value.length; i++) {
   currencyForkArray.push(this.instrumentService.getRepoCurrency(currency.value[i]));           
  });
  forkJoin(currencyForkArray).subscribe(repo => {
   repo.forEach((r:any)=>{
      this.instruments  =[...this.instruments , r.json()];
   })         
})