• 追加された行はこの色です。
• 削除された行はこの色です。
• Angular2/select multipleにngModelで双方向バインディングできない へ行く。
• Angular2/select multipleにngModelで双方向バインディングできない の差分を削除

* キーワード [#lbf4f080]
- Angular2
- select multiple
- ngModel

* 現象 [#z972b51b]

select multipleにngModelで双方向バインディングしようとすると、

 <select multiple [(ngModel)]="myModelProperty">
  ...
 </select>

エラー。

 error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: values.map is not a function

* 原因 [#t44267fa]

分からない。けど誰かがこう言っていた。

> As others have said, it's not supported by default in Angular2 yet.

* 対策 [#l80ff3e7]

select multipleで変更した値を自前で取得する。

 <select multiple (change)="onChangeValuesSelect($event)">
  ...
 </select>

 private onChangeValuesSelect(event: any) {
   let values = Array
   .from(event.target.options)
   .filter((option: any) => option.selected)
   .map((option: any) => option.value);
 }

* 備考 [#z7b31351]

ただし、上記の方法は順方向のバインディングになっていない。双方向にする具体的なコードは参考記事を見てほしい。

$eventの内容はコンソール出力すればいろいろ見れる。

 console.debug(event);

* 参考 [#fbe3891a]
- [[Angular2: how bind to select multiple - Stack Overflow>http://stackoverflow.com/questions/35167463/angular2-how-bind-to-select-multiple]]