Observable 元素上的两种方式数据绑定答案

【问题标题】：Two way data binding on Observable elementObservable 元素上的两种方式数据绑定
【发布时间】：2019-02-24 19:23:42
【问题描述】：

我想将 isSelected 绑定到包装在可观察对象中的对象。我一个人尝试（没有可观察的并且有效）。但是，在我的组件中，measure.isSelected 始终返回 false，即使选中了复选框。

          <tr *ngFor="let measure of criteriaSelectedMeasures$ | async ; let i = index">
            <td>{{measure.type}}</td>
            <td>{{measure.equipment}}</td>
            <td>{{measure.axis}}</td>
            <td>{{measure.direction}}</td>
            <td>{{measure.pr}}</td>
            <td>{{measure.section}}</td>
            <td>{{measure.agregation}}</td>
            <td>{{measure.measureType}}</td>
            <td>{{measure.qualification}}</td>
            <td>
              <p-checkbox name="criteria-measure-{{i}}" binary="true" [(ngModel)]="measure.isSelected"></p-checkbox>
            </td>
          </tr>

在我的组件内部：

this.criteriaSelectedMeasures$.subscribe(list => {
            this.store.dispatch(new AddMeasureDefinitionsAction(list.filter(m => m.isSelected))); <-- here isSelected is always false
        });

对我来说，两种方式的绑定在这里不起作用，因为异步管道或订阅 observable 会创建具有另一个引用的不同对象。

我说的对吗？还有另一种方法可以实现这一目标吗？（也许使用 ngModelChange ？）

【问题讨论】：

告诉我一件事，您想过滤该列表以仅包含isSelected 等于true 的那些对象，对吗？
它在没有观察到的情况下工作，因为引用是相同的。订阅返回新的对象集合。两种方式的数据绑定不会绑定它。

标签： angular typescript rxjs observable

【解决方案1】：

我会说你不应该修改来自可观察对象的对象。如果你想修改一些特定的度量，那么直接将它们作为数组传递，然后绑定到它们。仅当组件将呈现数据而不修改它们时，将 observable 传递给组件才有意义。

Observables 通常不是 Angular 的最佳解决方案。特别是它们只以一种方式传递信息，您通常应该将发出的对象视为不可变的，否则它就处于黑客攻击的边缘。

另外请注意，拥有两个订阅（一个使用 |async 和一个直接订阅）可能不是最好的，除非您的来源受到保护，例如与shareReplay。

另一个解决方案，虽然有点尴尬，但如果你真的想将对象作为 observables 传递，是在你传递的组件中有一个@Output() measureSelectionChange，例如度量 id 和单击复选框时的新选择状态，并且组件外部的内容负责实际修改度量（并可能将修改后的度量集再次推送到组件中）。

【讨论】：