Угловой |Программно установленный атрибут элементов

Question

Я использую Angular Material для создания отличного веб-приложения.Пожалуйста, рассмотрите следующий код:

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox">Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox">Checkbox 3</mat-checkbox>

Код производит три флажка.Когда установлен первый флажок, должны быть отмечены и два других.Если первый флажок не установлен, два других должны работать нормально.

В составе:

checkAll() {
  // How can I programmatically set the [checked] property here for .checkbox?
}

Answer 1

Вот пример этого:

HTML

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox [checked]="property1" class="checkbox">Checkbox 2</mat-checkbox>
<mat-checkbox [checked]="property2" class="checkbox">Checkbox 3</mat-checkbox>

Класс:

  //setting to different properties gives you the choice to check them individually
  property1;
  property2;

  checkAll() { 
     // this supposes that you want to uncheck in group also, if not set them just to 'true'
     this.property1 = !this.property1; 
     this.property2 = !this.property2;
  }

Демо

Answer 2

Добавьте свойство [флажок] ко второму и третьему флажку mat:

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox" [checked]="checkedWhenFirstIsChecked">Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox" [checked]="checkedWhenFirstIsChecked">Checkbox 3</mat-checkbox>

Инициализируйте 'selectedWhenFirstIsChecked' со значением false в вашем компоненте.

И установите для него значение true вВаша функция:

checkedWhenFirstIsChecked: boolean = false;

checkAll() {
  this.checkedWhenFirstIsChecked = true;
}

Когда [] вокруг 'проверено' односторонняя привязка уже создана, вам просто нужно установить значение.

Answer 3

Вот простое решение для проверки всего, что работает с любым количеством флажков.Он также обновляет главный флажок, если вы вручную отметили все флажки:

класс компонента

get master() {
  return this.checkboxes.every(c => c.checked);
}
set master(v) {
  this.checkboxes.forEach(c => c.checked = v);
}
checkboxes = new Array(5).fill(0).map(v => ({checked: false}));

шаблон компонента

<label>
  <input type="checkbox" #masterCheckbox [checked]="master" 
  (change)="master=masterCheckbox.checked">
  Check/Uncheck ALL
</label>

<ng-container *ngFor="let chk of checkboxes; let index=index">
  <br>
  <label>
    <input type="checkbox" [checked]="chk.checked" (change)="chk.checked=!chk.checked">
    Checkbox {{index}}
  </label>
</ng-container>

https://stackblitz.com/edit/checkbox-behavior?file=src%2Fapp%2Fapp.component.html