角 |以编程方式设置元素属性答案

【问题标题】：Angular | Programmatically set elements attribute角 |以编程方式设置元素属性
【发布时间】：2019-06-23 19:00:45
【问题描述】：

我正在使用 Angular Material 创建一个很棒的 Web 应用程序。请考虑以下代码：

<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?
}

【问题讨论】：

标签： angular checkbox angular-material

【解决方案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;
  }

Demo

【讨论】：

【解决方案2】：

这是一个简单的解决方案，用于检查所有与任意数量的复选框一起工作的内容。如果您手动选中所有复选框，它还会更新主复选框：

组件类

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

【讨论】：

【解决方案3】：

在第二个和第三个 mat-checkbox 中添加一个 [checked] 属性：

<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>

在您的组件中使用 false 初始化“checkedWhenFirstIsChecked”。

并在您的函数中将其设置为 true：

checkedWhenFirstIsChecked: boolean = false;

checkAll() {
  this.checkedWhenFirstIsChecked = true;
}

在“已选中”的 [] 周围已经创建了单向绑定，您只需设置值。

【讨论】：