javascript - Angular Material Checkbox 不会改变选中的状态

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)"