Question

我正在使用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?
}

Answer 1

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

组件类

( function ( path ) {
    var base = path.slice( 0, path.lastIndexOf( '/' ) )

    customElements.define( 'my-comp', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${base}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )

组件模板

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

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

Answer 2

这里是一个例子：

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

Answer 3

在第二个和第三个mat-复选框中添加一个[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;
}

选中[]左右的单向绑定已创建，只需设置该值即可。

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

3 个答案: