Как реализовать выбрать все в угловой материал выпадающий угловой 5 - PullRequest
Новая
       7

Как реализовать выбрать все в угловой материал выпадающий угловой 5

0 голосов
/ 28 августа 2018

Я использую mat-select для отображения выпадающего меню, мне нужно выбрать все функции в угловом выпадающем меню.

Ниже мой 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([]);
    }
}

Кто-то, как это не работает должным образом, пожалуйста, помогите или дайте мне лучший способ сделать это.

1 Ответ

0 голосов
/ 28 августа 2018

Использовать событие клика попробуйте это 

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option [value]="1" (click)="selectAll(ev)"   
    #ev
     >SelectAll</mat-option>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

}

Пример: https://stackblitz.com/edit/angular-czmxfp

...