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>

货币值示例：

切换美元按钮

[“美元”]

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

像这样尝试，使用forkJoin和Spread语法。因为您正在正确遍历数组，所以最好使用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()];
   })         
})

Answer 2

为什么不编写一个新函数将每次切换货币按钮时的货币添加到数组中。然后将该函数绑定到的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>

现在，这会将各自的货币添加到您的数组中。我希望这会有所帮助。

如何以rx方式在for循环内订阅并将发射的值保存到一个数组

2 个答案: