角度材质复选框不会更改已选中状态

Question

我正在处理元素列表并使用管道过滤列表，该过滤器是多选过滤器，使用多个值进行过滤，我将过滤器保存在本地存储中以在关闭窗口后在过滤器中具有持久性或重新加载页面，在mat-checkbox组件中，我在[checked]="existInArray(color.id, filterColor)"指令中使用i函数来检查复选框，如果该值已在过滤器数组中以检查复选框，但是我有问题，如果该复选框已使用该功能选中，下次我单击该复选框取消选中该复选框时，该复选框不会更改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

这是您的[checked]="existInArray(color.id)"与点击事件不同步的时间问题。...[checked]="existInArray(color.id)"发生在您点击之前。订阅change事件。

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

Answer 2

Top_Select：任意[] = []; //在ts文件中选中后清除选择

//在启动check_click事件时，请确保您在事件中获得了索引（index_chkbx）

this.Top_Select [index_chkbx] = true;

您的HTML