Mat-button-toggle餐饮用于多选

Question

我目前有一个mat-button-toggle-group Active，如下所示： 该按钮的数组为1,2,3，全部没有。多选已启用了多选，因此可以选择以下选项之一。我该怎么办，如果选择了1,2或3，然后选择“无”，则清除了先前的编号选项，以便仅选择任何选项。同样，如果选择了一切。

<mat-button-toggle-group #group="matButtonToggleGroup" style="margin-left: -100%; margin-right:20px" appearance="legacy" name="fontStyle" aria-label="Font Style"  [value]="selectedTime" (change)="onValChange(group.value)"  multiple>
 <mat-button-toggle style="color: black" disabled>Time</mat-button-toggle>
 <mat-button-toggle *ngFor="let time of getTime()" style="outline: none !important;" [value]="time.timeno" (click)="changeTimeSelection(time.timeno, time.begin, time.end)">{{time.timeno}}</mat-button-toggle>
</mat-button-toggle-group>

Answer 1

您可以在ChangeTimesElection中按下或弹出所需的值

changeTimeSelection(timeNo) {
    if (timeNo != 'All') {
      let isAllSelected = this.buttonValues
        .filter((v) => v.timeNo != 'All' && v.timeNo != 'None')
        .every((v) => this.selectedState.includes(v.timeNo));
      if (isAllSelected && !this.selectedState.includes('All')) {
        this.selectedState.push('All');
      } else {
        this.selectedState = this.selectedState.filter((s) => s != 'All');
      }
    }
    if (timeNo != 'None' && this.selectedState.length > 1) {
      this.selectedState = this.selectedState.filter((s) => s != 'None');
    }
    if (timeNo == 'All' && this.selectedState.includes('All')) {
      this.selectedState = this.buttonValues
        .filter((v) => v.timeNo != 'None')
        .map((v) => v.timeNo);
    }
    if (timeNo == 'None' && this.selectedState.includes('None')) {
      this.selectedState = ['None'];
    }
  }

。 ％2fapp％2ftoggle.component.ts，src％2FAPP％2FAPP.COMPONEN.PONENT.HTML“ rel =” nofollow noreferrer“> demo