首页 文章

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

提问于
浏览 次
0
// 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，但没有任何对我有用 . 我在控制台中获得正确的数据值，但选择不会更新 .

select angular5 ngmodel angular-ngmodelchange

1 回答

  • 2

    从服务器接收数据后，在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];
    }
}

    我希望它可以帮助你:)

    回复于

相关问题