订阅动态控件数组中的所有控件值答案

【问题标题】：Subscribe to all control values within an dynamic array of controls订阅动态控件数组中的所有控件值
【发布时间】：2022-11-02 20:28:21
【问题描述】：

我有一个动态的 ng-select 控件数组。每个控件由类NgSelectComponent 表示。

When select value changes I want to subscribe to all controls.

模板

  <ng-select #select">
    <ng-option *ngFor="let option of options" [value]="select.id">{{ option.name }}</ng-option>
  </ng-select>

班级

  @ViewChildren('select') controls: QueryList<NgSelectComponent>;

  ngAfterViewInit() {
    concat(this.controls.toArray()).subscribe(x => {
      console.log(x);
    });
  }

我尝试这样做，但不起作用。

concat(this.components.toArray()).subscribe(x => {
  console.log(x);
});

我相信它不起作用，因为我必须订阅 changeEvent 对应的每个控件产生的值，但努力做到这一点。

任何想法如何解决？

【问题讨论】：

标签： angular rxjs rxjs-observables

【解决方案1】：

这就是Reactive Forms 的用途。您创建一个FormArray 并在其中拥有FormControls。然后你可以订阅FormControls 的valueChanges observable。我强烈建议您使用此角度功能重写代码。

话虽这么说，最简单，更可以说未完善的解决方案是使用您所说的 changeEvent ：

<ng-select #select (change)="selectChanged($event)">
    <ng-option *ngFor="let option of options" [value]="select.id">{{ option.name }}</ng-option>
  </ng-select>

selectChanged($event) {
  // This function is called every time any select is changed.
  // If you want, you can create a Subject and .next() the values there to have an Observable
  console.log($event.target.value);
}

【讨论】：

【解决方案2】：

首先，concat 可能不起作用。使用concat，数组中的每个可观察对象都将等待前一个对象完成。这可能不是您在这里所期望的行为。

您可以使用merge，它将简单地将所有发出的值分别转发到输出 Observable。或者，如果你想要一个包含所有当前值的数组，只要有一个 Observable 发出，就使用combineLatest。

要将controls 的valueChanges 转换为数组，请使用map。

concat(this.controls.toArray().map(c => c.valueChanges)).subscribe(x => {
  console.log(x);
});

【讨论】：