另一种选择是将对象的value存储为字符串:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

组件:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

这是唯一的方法，我可以得到双向绑定工作，以设置页面加载的选择值。这是因为填充选择框的列表与我的选择绑定的对象不完全相同，它需要是相同的对象，而不仅仅是相同的属性值。

你可以通过在选择标签#device上创建一个引用变量来将值传递回组件，并将它传递给更改处理程序onChange($event, device.value)应该有新值

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
    <option *ng-for="#i of devices">{{i}}</option>
</select>

onChange($event, deviceValue) {
    console.log(deviceValue);
}

在Angular 5中，我是这样做的。获取对象$event。Value而不是$event.target.value

<mat-form-field color="warn">
   <mat-select (ngModelChange)="onChangeTown($event)" class="form-width" formControlName="branch" [(ngModel)]="branch" placeholder="Enter branch">
     <mat-option *ngFor="let branch of branchs" [value]="branch.value">
                  {{ branch.name }}
     </mat-option>
   </mat-select>
</mat-form-field>

onChangeTown(event): void {
  const selectedTown = event;
  console.log('selectedTown: ', selectedTown);
}

我也有同样的问题，我用下面的代码解决了:

(change)="onChange($event.target.value)"

如果你不需要双向数据绑定:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

对于双向数据绑定，分离事件和属性绑定:

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

export class AppComponent {
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
}

如果devices是一个对象数组，绑定到ngValue而不是value:

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
{{selectedDeviceObj | json}}

export class AppComponent {
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...
  }
}

活塞-不使用<形式> Plunker -使用<form>并使用新的表单API

我在https://angular.io/docs/ts/latest/guide/forms.html上学习Angular 2表单教程(TypeScript版本)时遇到了这个问题

选择/选项块不允许通过选择其中一个选项来改变选择的值。

按照Mark Rajcok的建议去做是有效的，尽管我想知道在最初的教程中我是否遗漏了什么内容，或者是否有更新。在任何情况下，补充

onChange(newVal) {
    this.model.power = newVal;
}

到HeroFormComponent类中的hero-form.component.ts

and

(change)="onChange($event.target.value)"

到her-form.com ponent.html中的<select>元素使其工作