Question

我将[(ngModel)]用作一个整体对象。当我从头开始执行此操作时效果很好，但是当我在编辑模式下使用它时效果不佳。因此，例如，当我通过其他功能分配ngModel时，select下拉菜单的视图不会更新。这是我的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);

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

ISO 639-1 code

当ngValue为对象时，在Angular 5中选择ngModel上进行双向数据绑定

1 个答案: