在 Angular 复选框上设置不确定 [英] Set indeterminate on Angular checkbox

问题描述

我正在尝试以编程方式将 Angular 复选框的值设置为 false true 或 indeterminate.我知道我无法将复选框设置为 indeterminate 值，但是我们确实可以访问输入中的 [indeterminate].是否可以通过 ngModel 以某种方式设置所有三个状态?

我有以下代码可以正常工作，但是我收到了 ExpressionChangedAfterItHasBeenCheckedError 错误.

HTML

<label for="{{label.objectId}}">{{label.labelName}}</label><input id="{{label.objectId}}" type="checkbox" name="group" [indeterminate]="checkedLabels()"[checked]="checkedLabels(label)" (change)="toggleSelectedLabels(label)"/>

TS

checkedLabels(label): boolean {const index = this.selectedLabels.indexOf(label.objectId);这.不确定状态 = 假；如果(！this.selectedClients.length){返回假；}if (this.countInArray(this.selectedLabels, label.objectId) === this.selectedClients.length) {返回真；}如果(索引> = 0){这.不确定状态 = 真；}}countInArray(数组，值){return array.reduce((n, x) => n + (x === value), 0);}

这里的用例类似于 Gmail 中的标签，除了使用客户端代替电子邮件.如果所有电子邮件都具有相同的标签，则它们显示为已检查，但如果不是所有电子邮件都共享标签，则它将显示不确定，可以在三种状态(真、假、不确定)之间循环.

第一季度.我怎样才能像使用 gmail 一样循环浏览这三种状态?

第 2 季度.为什么我在当前设置中收到 ExpressionChangedAfterItHasBeenCheckedError?

这是当前进度的 Stackblitz

解决方案

要使复选框不确定，可以使用指令

import { Directive, ElementRef,Input } from '@angular/core';@Directive({ 选择器: '[不确定]' })导出类 IndeterminateDirective {@输入()设置不确定(值){this.elem.nativeElement.indeterminate=值；}构造函数(私有元素:ElementRef){}}

那么你的复选框可以像

哪里

 click(cliente: any) {let indeterminated=(!cliente.checked && !cliente.indeterminated) ?真假;让checked=(!cliente.checked &&cliente.indeterminated)?true:falsecliente.indeterminated = 不确定；cliente.checked=已检查；}

看到你有checked"和indeterminated"两个变量，你可以随意循环

I'm trying to programatically set the value of Angular checkboxes to either, false true or indeterminate. I understand that I cannot set the checkbox to the value indeterminate however we do have access to [indeterminate] on the input. Is it possible to set all three states via ngModel somehow?

I have the following code which kinda works, however I am getting a ExpressionChangedAfterItHasBeenCheckedError error.

HTML

<div *ngFor="let label of ClientLabels | async">
  <label for="{{label.objectId}}">{{label.labelName}}</label>
  <input id="{{label.objectId}}" type="checkbox" name="group" [indeterminate]="checkedLabels()"
      [checked]="checkedLabels(label)" (change)="toggleSelectedLabels(label)" />
</div>

TS

checkedLabels(label): boolean {
    const index = this.selectedLabels.indexOf(label.objectId);
    this. indeterminateState = false;
    if (!this.selectedClients.length) {
      return false;
    }
    if (this.countInArray(this.selectedLabels, label.objectId) === this.selectedClients.length) {
      return true;
    }
    if (index >= 0) {
      this. indeterminateState = true;
    }
  }

countInArray(array, value) {
  return array.reduce((n, x) => n + (x === value), 0);
}

Here the use case is similar to that of labels in Gmail, except clients are used in the place of an email. If all of the emails have the same label then they show as checked, however if not all of them share the label then it will show an indeterminate which can be cycled through the three states (true, false, indeterminate).

Q1. How can I cycle through these three state in the same way as you can with gmail?

Q2. Why am I getting the ExpressionChangedAfterItHasBeenCheckedError with the current setup?

Here is a Stackblitz of current progress https://stackblitz.com/edit/angular-3bbutx

解决方案

To make a checkbox indeterminated, you can use a directive

import { Directive, ElementRef,Input } from '@angular/core';

@Directive({ selector: '[indeterminate]' })
export class IndeterminateDirective {
   @Input() 
   set indeterminate(value)
   {
     this.elem.nativeElement.indeterminate=value;
   }
    constructor(private elem: ElementRef) {
    }
}

Then you're checkbox can be like

<input class="pull-left" type="checkbox" 
     [indeterminate]="client.indeterminated" 
     [checked]="client.checked" (click)="click(client)"/>

where

  click(cliente: any) {
    let indeterminated=(!cliente.checked && !cliente.indeterminated) ? true : false;
    let checked=(!cliente.checked && cliente.indeterminated)?true:false
    cliente.indeterminated = indeterminated;
    cliente.checked=checked;
  }

See that you have two variables "checked" and "indeterminated", you can make a cycle as you want

这篇关于在 Angular 复选框上设置不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！