角垫复选框检查值答案

【问题标题】：angular mat-checkbox checked value角垫复选框检查值
【发布时间】：2021-03-02 20:42:31
【问题描述】：

我有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'。如果未选中“项目”，则必须自动取消选中“第一项”和“第二项”。如果选中“Items”复选框，则必须选中“First Item”和“Second Item”复选框。

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

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

【问题讨论】：

你能多介绍一下你的 html 和 ts 吗？

标签： angular typescript angular-material angular-ngmodel

【解决方案1】：

您应该创建两个方法，例如：onCheckedItem、onCheckedResult。在 onCheckedItem 方法中，将每个 items.selected 值设置为 checked 值（真或假，取决于检查的值）。在 onCheckedResult 中，我们创建一个数组来保存items.selected 值，如果这个selectedArray 包含true，它将设置checked 复选框值true，否则它将为false。如果您的项目对象中最初有 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>

干杯

【讨论】：