Флажок Angular Material не изменяет состояние проверяемого

Question

Я работаю со списком элементов и фильтрую список, используя каналы, фильтр является множественным выбором, чтобы фильтровать по нескольким значениям, я сохраняю фильтр в локальном хранилище, чтобы сохранить его в фильтре после закрытия окнаили перезагрузите страницу, в компоненте mat-checkbox я использую функцию i в директиве [checked]="existInArray(color.id, filterColor)", чтобы установить флажок, если значение уже есть в массиве фильтров, чтобы установить флажок, но у меня есть проблема, если флажок установлениспользуя функцию, в следующий раз, когда я нажимаю флажок, чтобы снять его, флажок не изменяет состояние checked true to false, только когда я щелкнул второй раз, измените на checked false

Шаблон

<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
  [checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
  (click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
  <div class="assigned">
    <div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
    <p class="assigned-name">{{ color.name }}</p>
  </div>
</mat-checkbox>

Filter.ts

  public existInArray(element, array: Array<string>): boolean {
    return array.indexOf(element) > -1;
  }

  public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
    this.toggleInArray(element, array);
    this.updateFilterObservable(filterType);
  }

Пример, как вы можете видеть визображение, флажок уже установлен по умолчанию, потому что я использую функцию existInArray, чтобы проверить, существует ли значение проверки в массиве фильтров, если я попытаюсь снять его, первый раз не будет работать, но когдая нажимаю второй раз, флажок снят, любая идея, что может быть ....?

Я думаю, что причина в том, что [checked] является триггером, прежде чем я переключаю элемент из массива, но не знаюпока что идея как решается .... любая идея.

Answer 1

Top_Select: any [] = [];// выделение сбрасывается при выборе ... в вашем файле ts

// при срабатывании события check_click добавьте это, убедитесь, что вы получили индекс (index_chkbx) в событии

this.Top_Select [index_chkbx] = true;

в вас html

Answer 2

Это временная проблема, из-за которой ваш [checked]="existInArray(color.id)" не синхронизирован с вашим событием клика .... [checked]="existInArray(color.id)" происходит до вашего клика.Подпишитесь на событие change.

(change)="toggleInArray(color.id)"