One way binding with ngModel in angular 4 it is not working with Observables

Question

I have an array which I have declared with Observables, in the array it is showing with console.log but in the dropdown I can see that only when click to drop down below than it is the id or name but I wan't if one that object has an string into that should shown me in the dropdown which string below to the project for example 32323 it is responsible for this project and when I open this project should show me on dropdown that responsible. This is my code.

 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));

This is the HTML

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

Answer 1

为了进行2种方式的绑定，您必须使用[(ngModel)]

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