我想将一个选择元素绑定到一个对象列表——这很容易：

@Component({
   selector: 'myApp',
   template: 
      `<h1>My Application</h1>
       <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
       </select>`
    })
export class AppComponent{
   countries = [
      {id: 1, name: "United States"},
      {id: 2, name: "Australia"}
      {id: 3, name: "Canada"},
      {id: 4, name: "Brazil"},
      {id: 5, name: "England"}
   ];
   selectedValue = null;
}

在这种情况下，它似乎selectedValue是一个数字——所选项目的 id。

但是，我实际上想绑定到 country 对象本身，这样它selectedValue就是对象而不仅仅是 id。我尝试像这样更改选项的值：

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

但这似乎不起作用。它似乎在我的selectedValue- 但不是我期待的对象中放置了一个对象。您可以在我的 Plunker
示例中看到这一点。

我还尝试绑定到更改事件，以便我可以根据选定的 id 自己设置对象；但是，似乎 change 事件在绑定的 ngModel
更新之前触发——这意味着我当时无权访问新选择的值。

有没有一种干净的方法可以使用 Angular 2 将选择元素绑定到对象？