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の例で見ることができます。
また、選択したIDに基づいて自分でオブジェクトを設定できるように、変更イベントにバインドしようとしました。ただし、バインドされたngModelが更新される前にchangeイベントが発生するようです。つまり、その時点で新しく選択された値にアクセスできません。
Angular 2でselect要素をオブジェクトにバインドするきれいな方法はありますか?