我想取消选择按钮单击时的复选框

Question

我想实现清除所有过滤器功能，因为我需要在单击按钮时取消选择所有复选框。

我使用了primeng复选框。 HTML：

<button (click)="clearAllFilters()">Clear All Filters</button>

<p-checkbox *ngFor="let cb of filterColorCheckboxes" value="{{cb.value}}"
    label="{{cb.value | titlecase}}" (onChange)="checkBoxFilter(cb.category, cb.value, $event)">
</p-checkbox>

在 event.checked 中，我得到一个长度为 1 的数组，其中包含复选框的值（而不是许多其他解决方案中给出的任何布尔值）。这就是为什么我无法取消选择该复选框。

Answer 1

为什么不使用 ngModel 来做到这一点？

import { Component, QueryList, ViewChildren } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { Checkbox } from 'primeng/checkbox';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChildren('checkbox') checkboxes: QueryList<Checkbox>;
  selectedCities: string[] = [];

  filterColorCheckboxes: any[] = [
    { value: false, label: 'A' },
    { value: false, label: 'M' },
    { value: false, label: 'P' },
    { value: false, label: 'R' },
  ];

  checked: boolean = false;

  ngOnInit() {}

  clearAllFilters() {
    console.log('clear');
    this.filterColorCheckboxes.forEach((x) => {
      x.value = false;
    });
  }

  checkBoxFilter(...argt) {
    console.log(argt);
  }
}

html

<mat-slider
  thumbLabel
  tickInterval="1000"
  min="1"
  max="100000"
  class="cdk-focused"
></mat-slider
>

堆栈闪电战