角垫复选框选中值

问题描述

我有 ts 代码：

import {Component} from '@angular/core';

@Component({
  selector: 'checkBox-configurable-example',templateUrl: 'checkBox-configurable-example.html',styleUrls: ['checkBox-configurable-example.css'],})
export class CheckBoxConfigurableExample {
  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  items = [{selected: true,label: 'First Item'},{selected: false,label: 'Second Item'}];
}

html 代码：

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">CheckBox configuration</h2>

    <section class="example-section">
      <mat-checkBox class="example-margin" [(ngModel)]="checked">Items</mat-checkBox>
    </section>

    <h2 class="example-h2">Result</h2>

    <section class="example-section" *ngFor="let item of items">
      <mat-checkBox  class="example-margin" [(ngModel)]="checked">{{item.label}}</mat-checkBox>
    </section>


  </mat-card-content>
</mat-card>

css 文件：

.example-h2 {
  margin: 10px;
}

.example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 60px;
}

.example-margin {
  margin: 0 10px;
}

根据代码，我有一个 mat-checkBox 'Items' 和 2 个 mat-checkBoxes'First Item'、'Second Item'。如果未选中“项目”，则必须自动取消选中“第一项”和“第二项”。如果您选中“项目”复选框，则必须选中“第一项”和“第二项”复选框。

如何实现以下行为（除了上述条件）？

1. 如果选择了“第一项”或“第二项”，则“项”也必须进入选中状态。此外，如果选择“第一项”，“第二项”的“已检查”状态不会改变，反之亦然。
2. 如果取消选中“第一项”和“第二项”复选框，则还必须取消选中“项目”复选框。

解决方法

您应该创建两个方法，例如：onCheckedItem、onCheckedResult。在 onCheckedItem 方法中，将每个 items.selected 值设置为 checked 值（true 或 false 取决于检查的值）。在 onCheckedResult 中，我们创建了一个包含 items.selected 值的数组，如果此 selectedArray 包含 true，它将设置 checked 复选框值为 true，否则它将设置为 false。 如果您的 items 对象中最初有 items.selected:true，则 ngOnInit 生命周期钩子是必要的。

import {Component,OnInit} from '@angular/core';
....
export class CheckboxConfigurableExample implements OnInit{
  checked: boolean = false;

  items = [
   {selected: true,label: 'First Item'},{selected: false,label: 'Second Item'}
  ];

  ngOnInit(): void {
    this.onCheckedResult();
  }

  onCheckedItem() {
    this.items.forEach((item) => {
      item.selected = this.checked
    });
  }

  onCheckedResult() {
    let selectedArray = [];
    this.items.forEach((item) => {
      selectedArray.push(item.selected)
    });
    selectedArray.includes(true) ? this.checked = true : this.checked = false;
  }
}

在您的模板中，您必须在每个复选框上设置更改事件，如下所示：

<h3>Checkbox configuration</h3>
<mat-checkbox (change)="onCheckedItem()" [(ngModel)]="checked"> Item</mat-checkbox>
<h3>Results</h3>
<ng-container *ngFor="let item of items">
  <mat-checkbox (change)="onCheckedResult()" [(ngModel)]="item.selected" class="chk-box"> 
    {{ item.label }}
  </mat-checkbox>
</ng-container>

干杯