角度材質オプションすべてを選択しますか？

Question

私は角4で作業しており、最新の材料を使用しています。私は複数の選択肢のオプションでmd-selectを使用していますが、opitonを持っていたいと思っています。 "すべて選択"は存在するすべてのオプションを選択します。私は何をしますか？

<md-select multiple> 
<md-option> Select All </md-option> 
<md-option> Option 1 </md-option> 
<md-option> Option 2 </md-option> 
<md-option> Option 3 </md-option> 
</md-select> 

Answer 1

私が最初に選択されたオプションが値を持たないし、次に（このソリューションは、反応性フォームのためですformControlをリセットした場合、次にチェック選択の値の変更のコールバック、思い付いた。それが簡単にする必要がありますモデルフォームの適応）

HTML：

<mat-select formControlName="myControl" multiple (ngModelChange)="resetSelect($event, 'myControl')"> 
    <mat-option>Select All</mat-option> 
    <mat-option [value]="1">Option 1</mat-option> 
    <mat-option [value]="2">Option 2</mat-option> 
    <mat-option [value]="3">Option 3</mat-option> 
</mat-select> 

TS：

/** 
* click handler that resets a multiple select 
* @param {Array} $event current value of the field 
* @param {string} field name of the formControl in the formGroup 
*/ 
protected resetSelect($event: string[], field: string) { 
    // when resetting the value, this method gets called again, so stop recursion if we have no values 
    if ($event.length === 0) { 
     return; 
    } 
    // first option (with no value) has been clicked 
    if ($event[0] === undefined) { 
     // reset the formControl value 
     this.myFormGroup.get(field).setValue([]); 
    } 
} 

これは機能しますが、少し汚れているようです。 setValue()はもちろんngModelChangeをトリガーするので、私たちは再帰に入ります。これは単に$event.length === 0で止まります。また、undefinedの値を持つ最初のオプションをチェックするのは少し... meeeeh ...

私は誰かがより洗練されたソリューションを提供できるか分かります！