mat-checkbox，选择时，取消选择所有其余的

Question

我对切换列表有一个独特的要求。

默认情况下，所有 (4) 个切换均为 true。选择一个开关时，我希望所有其他开关设置为 false，而所选开关设置为 true。

然后我希望能够选择其他人来真正“添加”。

我的代码如下：

超文本标记语言

<mat-list class="list lt-checkbox" [ngClass]="{'selected-all': allTogglesSelected()}">

<mat-list-item>

  <app-icon-switch class="toggle-all" text="All Sydney" [subText]="" icon=""

    (checkedChange)="onAllChange($event)" [checked]="allTogglesSelected()">

  </app-icon-switch>

</mat-list-item>

<mat-list-item>

  <mat-checkbox [checked]="getFilterValue('Toggle_one')" (change)="onToggleChange('Toggle_one', $event)" color="primary"

    class="toggle">Toggle 1

  </mat-checkbox>

</mat-list-item>

<mat-list-item>

  <mat-checkbox [checked]="getFilterValue('Toggle_two')" (change)="onToggleChange('Toggle_two', $event)"

    color="primary" class="toggle">Toggle 2

  </mat-checkbox>

</mat-list-item>

<mat-list-item>

  <mat-checkbox [checked]="getFilterValue('Toggle_three')" (change)="onToggleChange('Toggle_three', $event)"

    color="primary" class="toggle">Toggle 3

  </mat-checkbox>

</mat-list-item>

<mat-list-item>

  <mat-checkbox [checked]="getFilterValue('Toggle_four')" (change)="onToggleChange('Toggle_four', $event)" color="primary"

    class="toggle">Toggle 4

  </mat-checkbox>

</mat-list-item>

切换 TS

private toggleRegions = ['Toggle_one', 'Toggle_two', 'Toggle_three', 'Toggle_four'];

  onToggleChange(toggleState: string, value: any) {

    this.toggleFilters[toggleState] = value.checked;

    this.saveInStore();

  }

  onAllChange(value: boolean) {

    const hasChanged = this.toggleRegions.some(r => this.toggleFilters[r] !== value);

    if (hasChanged) {

      this.toggleRegions.forEach(r => (this.toggleFilters[r] = value));

      this.saveInStore();

    }

  }

出于隐私原因，我不得不更改一些名字。基本上，它目前的工作方式是单击一个切换按钮将取消选择它并保持其他选项的选择，我想要相反的情况。

Answer 1

因此，您似乎没有使用 Angular 强大的更改检测来捕获所有这些值更改。这就是我要做的：在组件中（请添加您自己的类型）：firstToggle: boolean = true;listItems = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 'Toggle_one',&nbsp; &nbsp; &nbsp; &nbsp; checked: true,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Toggle 1'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 'Toggle_two',&nbsp; &nbsp; &nbsp; &nbsp; checked: true,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Toggle 2'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 'Toggle_three',&nbsp; &nbsp; &nbsp; &nbsp; checked: true,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Toggle 3'&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 'Toggle_four',&nbsp; &nbsp; &nbsp; &nbsp; checked: true,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Toggle 4'&nbsp; &nbsp; },]onToggleChange(id: string, value: any) {&nbsp; &nbsp; this.listItems = this.listItems.map(item => {&nbsp; &nbsp; &nbsp; &nbsp; if (item.id === id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.checked = value.checked;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.firstToggle) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.checked = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; })&nbsp; &nbsp; if (this.firstToggle) {&nbsp; &nbsp; &nbsp; &nbsp; this.firstToggle = false;&nbsp; &nbsp; }&nbsp; &nbsp; this.saveInStore();}onAllChange(value: boolean) {&nbsp; &nbsp; this.listItems = this.listItems.map(item => {&nbsp; &nbsp; &nbsp; &nbsp; item.checked = value;&nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; })&nbsp; &nbsp; this.saveInStore();}saveInStore() {&nbsp; &nbsp; this.store.dispatch(UpdateToggleFilter({ toggleFilters: this.toggleFilters }));}在 HTML 中：<mat-list class="list lt-checkbox" [ngClass]="{'selected-all': allTogglesSelected()}">&nbsp; &nbsp; <mat-list-item>&nbsp; &nbsp; &nbsp; &nbsp; <app-icon-switch class="toggle-all" text="All Sydney" [subText]="" icon="" (checkedChange)="onAllChange($event)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [checked]="allTogglesSelected()">&nbsp; &nbsp; &nbsp; &nbsp; </app-icon-switch>&nbsp; &nbsp; </mat-list-item>&nbsp; &nbsp; <mat-list-item *ngFor="let item of listItems">&nbsp; &nbsp; &nbsp; &nbsp; <mat-checkbox [checked]="item.checked" (change)="onToggleChange(item.id, $event)" color="primary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="toggle">{{item.text}}&nbsp; &nbsp; &nbsp; &nbsp; </mat-checkbox>&nbsp; &nbsp; </mat-list-item></mat-list>希望这有帮助！ :)