选择所有垫选项并取消选择全部

我的情况如下:

我想要实现的是:

当用户单击All时,将选择所有选项,当用户再次单击All时,将取消所有选项.

如果所有选项被选中,并单击用户比任何其他复选框, All然后所有,并点击复选框将被取消.

当用户逐个选择4个选项时,则选择All.

HTML文件

    
          {{filters.value}}
    
        All

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

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

请参阅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:

    
        
            {{filters.value}}
        
        All