在角度 4 中与 ngModel 绑定的一种方法不适用于 Observables答案

【问题标题】：One way binding with ngModel in angular 4 it is not working with Observables在角度 4 中与 ngModel 绑定的一种方法不适用于 Observables
【发布时间】：2019-03-10 16:59:00
【问题描述】：

我有一个用 Observables 声明的数组，在数组中它用 console.log 显示，但在下拉列表中我可以看到，只有当点击下拉菜单时，它才是 id 或名称，但我不想该对象有一个字符串，应该在下拉列表中向我显示该项目下面的哪个字符串，例如 32323 它负责这个项目，当我打开这个项目时，应该在下拉列表中显示我负责。这是我的代码。

 cluster$: Observable<DropdownOption[]>;

 selectClusterOptions = createSelector(
    selectClusters,
    clusters => {
      const options: DropdownOption[] = [];
      options.push(...clusters.map(cluster => ({ key: cluster.id, value: cluster.name })).toArray());
      return options;
    }
  );


   this.cluster$ = store.pipe(select(this.selectClusterOptions));

这是 HTML

<app-dropdown label="Cluster" labelWidth="75px" optionWidth="170px" [items]="cluster$ | async" [ngModel]="(selectValueItem$ | async).clusterId"></app-dropdown>

【问题讨论】：

用作[(ngModel)]
[(ngModel)] 或两种方式的数据绑定不适用于异步
您可以尝试在数据更新时使用changeDetectorRef.detectChanges()

标签： html angular typescript observable ngrx

【解决方案1】：

要进行 2 路绑定，您必须使用 [(ngModel)]

<app-dropdown label="Cluster" labelWidth="75px" optionWidth="170px" [items]="cluster$ | async" [(ngModel)]="(selectValueItem$ | async).clusterId"></app-dropdown>

【讨论】：

我已经尝试过了，但它显示了这个错误。解析器错误：在 [(selectValueItem$ | async).clusterId=$event] 的第 21 列的操作表达式中不能有管道
你不能通过两种方式绑定到一个 observable 中。我没看到
是的，我有谷歌，但问题可能是我认为在这个项目 cluster$ |异步