angular - 当 ngValue 是对象时，Angular 5 中选择 ngModel 的双向数据绑定(bind)

Question

我正在使用 [(ngModel)]作为一个整体。当我从头开始时，这很好用，但在编辑模式下使用时就不行了。因此，例如当我分配 ngModel 时通过其他一些功能，选择下拉列表的 View 不会更新。
这是我的 HTML 的外观。

<select 
  class="form-control" 
  [(ngModel)]="selectedContentType" 
  [attr.disabled]="hideCollectionandContentType || hideContentTypeOnly ? '' : null" 
  required 
  (change)="contentTypeChanged(selectedContentType)">
  <option [ngValue]="undefined">
    Select Content Type
  </option>
  <option 
    *ngFor="let c of contentTypes" 
    [ngValue]="c">
    {{c.value}}
  </option>
</select>

contentTypes 的 json 看起来像每个对象的这种格式。

{ key: '', value: ''}

例如，我正在阅读一个现有的表单，它应该显示来自 API 的数据。我正在像这样设置数据。

const selectedContentType = JSON.parse(res.BulkUpdate_SelectedContentType);
        this.selectedContentType = { key: selectedContentType.ContentTypeId, value: selectedContentType.ContentTypeName };

它的设置格式正确，但选择下拉列表没有更新。

Answer 1

如果你想设置下拉列表，你必须设置相同的对象引用，javascript中的对象按引用比较，当你设置时selectedContentType对于新对象，即使它具有相同的属性和值，它也会考虑不同的值。

这是一个新的对象引用，它不等于任何选项值。

  this.selectedContentType = { key: selectedContentType.ContentTypeId, value: selectedContentType.ContentTypeName };

例子

contentTypes = [
    {name:1,value:1},
    {name:2,value:2},
    {name:3,value:3},
    {name:4,value:4},
    ];

set() {
      // this.selectedContentType = {name:1,value:1}; // not working , new object refrences
      this.selectedContentType = this.contentTypes[0]; 
    }

如果要将所选项目的值设置为 4 作为示例

this.selectedContentType = this.contentTypes.find(i => i.value == 4);

在上面的行中，我们在下拉选项列表中获得了相同的对象引用。

stackblitz demo