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

Question

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

请看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);
  }

Answer 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。

Answer 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>    

Answer 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
}