angular - 角垫复选框检查值

Question

我有 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”复选框。

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

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

标签： angulartypescriptangular-materialangular-ngmodel

Answer 1

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

干杯