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

问题描述

我试图以编程方式将Angular复选框的值设置为false true或indeterminate.我了解我无法将复选框设置为值indeterminate，但是我们可以访问输入中的[indeterminate].是否可以通过ngModel设置所有三种状态?

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?

我有下面的代码可以工作，但是出现了ExpressionChangedAfterItHasBeenCheckedError错误.

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);
}

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

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.我该如何像使用gmail一样以相同的方式循环显示这三个状态?

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

Q2.为什么我使用当前设置获得ExpressionChangedAfterItHasBeenCheckedError?

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

以下是当前进度的Stackblitz https://stackblitz.com/edit/angular-3bbutx

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) {
    }
}

那么您就是复选框

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

其中

  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;
  }

看到您有两个变量"checked"和"indeterminated"，则可以根据需要进行循环

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

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