RxJs：有 observable 由 2 个独立的 observables 触发

Question

我有一个名为 "workcentersFiltered" 的可观察对象 Observable<Workcenter[]>

当我 select 工厂时，我可以使用以下代码成功过滤我的工作中心 - 没问题：

this.workcentersFiltered = this.newLineForm.get('plant').valueChanges
      .flatMap(selectedPlant => {
        return this.dataStore.Workcenters.map(workcenters => {
          return workcenters.filter(x => x.PlantNumber === selectedPlant.PlantNumber);
        });
      });

问题是，当一个完全不同的、独立的可观察对象“'workcenter'.valuechanges”发出一个字符串（它是一个输入字段——我正在尝试实现自动完成）时，我想进一步缩小该数组的范围.

所以问题是，我如何订阅this.newLineForm.get('workcenter').valueChanges，以便它发出的字符串值可用于进一步缩小workcentersFiltered内的数据"hidden"（已经绑定到 this.newLineForm.get('plant').valueChanges.

我的困境有意义吗？我是否必须改为将 workcenteresFiltered 重做为 aBehaviorSubject，或者这里的正确解决方案是什么？

编辑更多解释

目前 workcentersFiltered 从 dataStore.Workcenters 获取数据，当 plant-forminput.valuechanges 发出变化时，因为一个工厂被 selected。因此，我可以将所有工作中心缩小到仅与所选工厂相匹配的工作中心。它适用于我上面的代码。

不过，我想在 plant-forminput.valuechanges 和 workcentersFiltered 之间的序列上引入一个新操作。我想根据 workcenter-forminput.valuechanges.

的排放进一步缩小选项范围

所以在我的 UI 上的第 1 步，用户可以从下拉列表中 select 一个工厂，其他工厂的所有工作中心都被过滤掉 - 这有效。

然后，第2步是用户选择一个特定的工作中心。这是一个文本输入字段。我希望在此处输入的每个字母（在 workcenter-forminput.valuechanges 上发出）进一步缩小选项范围（用于自动完成）。

我很难想象解决方案，因为从步骤 2 (workcenter-forminput.valuechanges) 新引入的可观察对象仅在它发出时才相关。

Answer 1

您可以使用 combineLatest 来实现。

我无法理解您的完整描述，所以我只提供一个大概的示例，希望您可以根据自己的具体用例进行调整：

workcentersForPlant = this.newLineForm.get('plant').valueChanges
      .flatMap(selectedPlant => {
        return this.dataStore.Workcenters.map(workcenters => {
          return workcenters.filter(x => x.PlantNumber === selectedPlant.PlantNumber);
        });
      });

const workCenterNameChanges = this.newLineForm.get('workCenterName').valueChanges;

// combine the 2 observables, this will trigger when either observable
// changes.  Use the combined values to do the filtering by name
this.workcentersFiltered = Observable
  .combineLatest(workcentersForPlant, workCenterNameChanges$)
  .map(([workCenters, workCenterName]) => workCenters.filter(w => w.name.startsWith(workCenterName)));

RxJs：有 observable 由 2 个独立的 observables 触发

RxJs: Have observable triggered by 2 independent observables

javascript

reactive-programming

rxjs

rxjs5

angular