mat-checkbox, при выборе, отмените выбор всего остального

Question

У меня есть уникальное требование для списка переключения.

По умолчанию все (4) переключатели имеют значение true. При выборе одного переключателя я хочу, чтобы все остальные переключатели были установлены в значение false, в то время как выбранный переключатель имеет значение true.

Затем я хочу иметь возможность выбрать другие переключатели, которые будут иметь значение true для «добавления».

Мой код выглядит следующим образом:

HTML

<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();
    }
  }

  saveInStore() {
    this.store.dispatch(UpdateToggleFilter({ toggleFilters: this.toggleFilters }));
  }

  getFilterValue(filter: string): boolean {
    return this.toggleFilters[filter];
  }

  allSydneySelected(): boolean {
    return this.toggleRegions.findIndex(r => !this.toggleFilters[r]) === -1;
  }

Мне пришлось изменить некоторые имена из соображений конфиденциальности. По сути, в настоящее время он работает, так как нажатие на тумблер отменит его и оставит остальные выделенными, я хочу наоборот.

Answer 1

Итак, похоже, что вы не используете мощное обнаружение изменений Angular для отслеживания всех этих изменений значений. это то, что я бы сделал:

в компоненте (пожалуйста, добавьте свои собственные типы):

firstToggle: boolean = true;
listItems = [
    {
        id: 'Toggle_one',
        checked: true,
        text: 'Toggle 1'
    },
    {
        id: 'Toggle_two',
        checked: true,
        text: 'Toggle 2'
    },
    {
        id: 'Toggle_three',
        checked: true,
        text: 'Toggle 3'
    },
    {
        id: 'Toggle_four',
        checked: true,
        text: 'Toggle 4'
    },
]

onToggleChange(id: string, value: any) {
    this.listItems = this.listItems.map(item => {
        if (item.id === id) {
            item.checked = value.checked;
        } else {
            if (this.firstToggle) {
                item.checked = false;
            }
        }
        return item;
    })

    if (this.firstToggle) {
        this.firstToggle = false;
    }

    this.saveInStore();
}

onAllChange(value: boolean) {
    this.listItems = this.listItems.map(item => {
        item.checked = value;
        return item;
    })
    this.saveInStore();
}

saveInStore() {
    this.store.dispatch(UpdateToggleFilter({ toggleFilters: this.toggleFilters }));
}

В HTML:

<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 *ngFor="let item of listItems">
        <mat-checkbox [checked]="item.checked" (change)="onToggleChange(item.id, $event)" color="primary"
            class="toggle">{{item.text}}
        </mat-checkbox>
    </mat-list-item>
</mat-list>

Надежды на это помогает! :)