☰

Angularで選択要素をオブジェクトにバインドする 質問する

tag-icon • tag-icon html angular
Angularで選択要素をオブジェクトにバインドする 質問する

選択要素をオブジェクトのリストにバインドしたいと思います。これは簡単です。

@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 になるようです。

しかし、実際には、ID だけではなく、country オブジェクト自体にバインドして、それがオブジェクトになるようにしたいと思いますselectedValue。次のようにオプションの値を変更してみました。

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

しかし、これはうまくいかないようです。どうやらオブジェクトを配置しているようですselectedValueが、私が期待しているオブジェクトではありません。私のPlunkerの例を見てください。

また、選択した ID に基づいてオブジェクトを自分で設定できるように、変更イベントにバインドしようとしましたが、バインドされた ngModel が更新される前に変更イベントが発生するようです。つまり、その時点では新しく選択された値にアクセスできないということです。

Angular 2 を使用して選択要素をオブジェクトにバインドする簡単な方法はありますか?

ベストアンサー1

<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、事前に選択されたインスタンスは値の 1 つと同一である必要があります。

最近追加されたカスタム比較も参照してくださいAngular 5 の新機能 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;
}

おすすめ記事