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

如果_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 2

您需要以这种方式使用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 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
}

模型绑定不适用于angular2中的select

3 个答案: