キーワード†

• Angular2
• select multiple
• ngModel

現象†

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

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

エラー。

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

原因†

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

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

対策†

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);
}

備考†

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

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

console.debug(event);

参考†

• Angular2: how bind to select multiple - Stack Overflow