Question

// 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，在下拉列表的底部显示一个网格，该网格根据所选的下拉数据进行更新。如果在下拉列表中选择了除第一个数据以外的其他数据并再次调用API for dataList来刷新列表，我需要在下拉列表中选择prevoius选项，而是将其重置为第一个选项。

我强制需要使用ngModel Select绑定对象。即使我尝试使用ngModelChange，event.target.value，但没有任何对我有用。我在控制台中获得了正确的数据值，但是选择没有得到更新。

Answer 1

从服务器接收数据后，在dataList上写一个循环，并将它们的Id与您选择的前一个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];
    }
}

我希望它可以帮助你：）

Angular5中的DropDown选择 - 使用NgModel的绑定对象不会更新选择值

1 个答案: