选择所有垫选项，然后取消选择全部 [英] Select All mat option and deselect All

问题描述

我有以下情况:

我要实现的是:

1. 当用户单击全部时，应选择所有选项；当用户再次单击全部时，应删除所有选项.
2. 如果选中了全部选项，并且用户单击了除All以外的任何其他复选框，则将取消选择全部和单击的复选框.
3. 当用户一个接一个地选择4个选项时，则应选择全部".

1. When user click on All then all options shall be selected and when user click All again then all options shall be deselcted.
2. If All option is checked and user click any other checkbox than All then All and clicked checkbox shall be deselected.
3. When user selects 4 options one by one then All shall be selected.

HTML文件

<mat-select placeholder="User Type" formControlName="UserType" multiple>
    <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key">
          {{filters.value}}
    </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
</mat-select>

TS文件

this.searchUserForm = this.fb.group({
  userType: new FormControl('')
});

userTypeFilters = [
  {
    key: 1, value: 'Value 1',
  },
  {
    key: 2, value: 'Value 2',
  },
  {
    key: 3, value: 'Value 3',
  },
  {
    key: 4, value: 'Value 4',
  }
]

toggleAllSelection() {
  if (this.allSelected.selected) {
    this.searchUserForm.controls.userType
    .patchValue([...this.userTypeFilters.map(item => item.key), 0]);
  } else {
    this.searchUserForm.controls.userType.patchValue([]);
  }
}

现在，如何实现第二和第三点

Stackblitz是: https ://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file = app/app.component.html

Stackblitz is: https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html

推荐答案

在每个mat-option和select()/deselect()所有选项上单击以下选项，使用下面的代码创建函数:

Use code as below create function on click each mat-option and select()/deselect() all option:

请参阅stackblitz: https ://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file = app/app.component.html

See stackblitz:https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html

TS:

tosslePerOne(all){ 
   if (this.allSelected.selected) {  
    this.allSelected.deselect();
    return false;
}
  if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length)
    this.allSelected.select();

}
  toggleAllSelection() {
    if (this.allSelected.selected) {
      this.searchUserForm.controls.userType
        .patchValue([...this.userTypeFilters.map(item => item.key), 0]);
    } else {
      this.searchUserForm.controls.userType.patchValue([]);
    }
  }

HTML:

<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
    <mat-select placeholder="User Type" formControlName="userType" multiple>
        <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key" (click)="tosslePerOne(allSelected.viewValue)">
            {{filters.value}}
        </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    </mat-select>
</form>

这篇关于选择所有垫选项，然后取消选择全部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！