模型绑定不适用于angular2中的选择[重复]

Posted 2023-03-05

【中文标题】模型绑定不适用于angular2中的选择[重复]

【英文标题】：model bind is not working with select in angular2 [duplicate]

【发布时间】：2016-08-14 10:18:06

【问题描述】：

我正在尝试设置下拉菜单的默认值，我为模型设置了默认值但它没有更新选择

请看https://plnkr.co/edit/bNM5Yxx78iykv2opazoL?p=preview

@Component(
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option attr.value="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select>    
    `)
export class AppComponent 
  _towers = [_id:1, name: '1', _id:2, name: '2', _id:3, name: '3'];
  constructor() 
    this._selectedTower = 2 ;
  

  changeTower() 
    setTimeout(()=>
      alert( this._selectedTower);
    ,100);
  

【问题讨论】：

plnkr.co/edit/slsnV5nc3zVVqXeuIJzZ?p=preview

【参考方案1】：

您需要以这种方式使用 ngValue 进行选择：

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select> 

看到这个 plunkr：https://plnkr.co/edit/UC5iYQUIFIrQMNeYbSQy?p=preview。

【参考方案2】：

如果_selectedTower 指的是对象而不是原始值（_towers 也是如此 - 对象数组而不是原始值）然后使用 ngValue 而不是 value

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower" *ngFor="let tower of _towers;">Tower tower.name</option>
</select>    

【参考方案3】：

<select class="form-control selectpicker" #select (change)="changeTower(select.value)" [(ngModel)]="_selectedTower">
  <option value="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select>  

changeTower(id) 

    //id is the selected value