javascript - 模型绑定(bind)不适用于 Angular2 中的选择

Question

这个问题已经有答案了:

Binding select element to object in Angular (16 个回答)

已关闭 7 年前。

我正在尝试设置下拉列表的默认值，我使用默认值设置模型，但它没有更新选择

请看这个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 .