模型綁定不與選擇工作在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

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

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

您需要使用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。