[解決済み] Angularでselect要素をオブジェクトにバインドする

質問

select要素にオブジェクトのリストを結合したいのですが、これは簡単なことです。

@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になります。

しかし、実際には、国オブジェクト自体にバインドして selectedValue は単なるidではなく、オブジェクトです。 オプションの値をこんな風に変えてみました。

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

が、これはうまくいかないようです。 オブジェクトを selectedValue -- しかし、私が期待しているようなオブジェクトではありません。 あなたは Plunkerの例では、次のようになります。 .

しかし、バインドされた ngModel が更新される前に change イベントが発生するようです - つまり、その時点で新しく選択された値にアクセスすることができないのです。

Angular 2でselect要素をオブジェクトにバインドするきれいな方法はありますか？

どのように解決するのですか？

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitzの例

注意:この場合 [ngValue]="c" の代わりに [ngValue]="c.id" ここで、c は完全な国名オブジェクトです。

[value]="..." は文字列値のみをサポートします。
[ngValue]="..." は任意の型をサポートします。

更新

もし value がオブジェクトの場合、事前に選択されたインスタンスはいずれかの値と同一である必要があります。

最近追加されたカスタム比較も参照してください。 https://github.com/angular/angular/issues/13268 4.0.0-beta.7から使用可能です。

<select [compareWith]="compareFn" ...

にアクセスしたい場合に気をつけること。 this 内の compareFn .

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}