Angular 5 中的下拉选择 - 使用 NgModel 绑定对象不会更新选择值答案

【问题标题】：DropDown Select in Angular5 - Binding Object with NgModel doesnot update select valueAngular 5 中的下拉选择 - 使用 NgModel 绑定对象不会更新选择值
【发布时间】：2018-02-08 08:01:44
【问题描述】：

// html code   
 <select class="form-control form-control-primary" 
        (change)="changeValue(data)"
        [(ngModel)]="data" name="list" id="selectData">

          <option *ngFor="let data of dataList" [ngValue]="data">
           {{data.name}}
          </option>

    </select>

//  ts code
    data: any;
    dataList = [{id:1, name:"XYZ"},{id:2,name:"ABC"}];

    changeValue(data){
        console.log(data);     // prints selected data correctly
    }

这是示例代码，仅用于解释我在项目中如何使用它。在我的情况下，dataList 数组来自 API，下拉列表底部显示一个网格，该网格根据下拉列表的选定数据进行更新。当在下拉列表中选择第一个数据以外的数据并且我再次调用 dataList 的 API 以刷新列表时，我需要在下拉列表中选择 prevoius 选项，但它会重置为第一个选项。

而且我必须将对象与 ngModel Select 绑定。即使我尝试使用 ngModelChange, event.target.value 但对我没有任何帮助。我在控制台中获得了正确的数据值，但选择没有得到更新。

【问题讨论】：

标签： select angular5 ngmodel angular-ngmodelchange

【解决方案1】：

从服务器接收到数据后，在 dataList 上编写一个循环，并将其 Id 与您选择的前一个进行比较。然后将对象绑定到数据

// Assume that you saved previousId in localStorage or 
// got it from the server or somewhere else
for (let i = 0; i < this.dataList.length; i++ ) {
    if ( this.dataList[i].id == previousId ) {
        this.data = this.dataList[i];
    }
}

希望对你有帮助:)

【讨论】：

这个我之前只尝试过，它可以工作，但是 ngModel 在这里有什么用呢？而且我的数组 dataList 有大量数据，那么在 change 事件中循环是否可以？
@Khush ngModel 会将所选选项绑定到您的模型。但是第一次，您的模型应该使用 dataList 中的选定选项进行初始化。
@Khush 如果不需要整个对象，最好将 ngValue 更改为 [ngValue]="data.id"，将 ngModel 更改为 [(ngModel)]="data.id"。然后你应该首先将选定的 id 设置为 ngModel，它不需要任何循环。使用changeValue(data)中的全部数据
不，我需要整个项目对象，因为其他值依赖于项目的其他属性
@Khush 您可以将对象保存在localStorage 中，然后再次使用它，或者如果可能的话从API 中获取。