Установить неопределенный на угловой флажок

Question

Я пытаюсь программно установить значение угловых флажков на false true или indeterminate. Я понимаю, что не могу установить флажок на значение indeterminate, однако у нас есть доступ к [indeterminate] на входе. Можно ли как-то установить все три состояния через ngModel?

У меня есть следующий код, который вроде работает, но я получаю ошибку ExpressionChangedAfterItHasBeenCheckedError.

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, за исключением того, что клиенты используются вместо электронной почты. Если все электронные письма имеют одинаковую метку, они отображаются как проверенные, однако, если не все из них имеют общую метку, тогда она будет показывать неопределенный, который можно циклически проходить через три состояния (истина, ложь, неопределенность).

Q1. Как я могу переключаться между этими тремя состояниями так же, как вы можете с помощью gmail?

Q2. Почему я получаю ExpressionChangedAfterItHasBeenCheckedError с текущей настройкой?

Вот Stackblitz текущего прогресса https://stackblitz.com/edit/angular-3bbutx

Answer 1

Чтобы сделать флажок неопределенным, вы можете использовать директиву

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

Обратите внимание, что у вас есть две переменные: «проверено» и «неопределено», вы можете сделать цикл так, как хотите