javascript - 复选框 [选中] 指令 angular2+ 奇怪的行为

Question

我有一个简单的下拉列表，其中包含一些过滤器。

单击过滤器时，我希望表格仅显示具有此子类别的项目。

当点击一个li元素时，它工作得很好，并且复选框被选中。当我按下复选框本身（输入）时，表格确实显示了所需的结果，但未选中复选框。

HTML：

<ng-container *ngIf="multi; else singleSelectItem">
            <li class="list-item" *ngFor="let item of filteredData; index as i" (click)="setFilter(item)" stopPropagation>
                <input type="checkbox" class="hidden-box" [id]="i+item" stopPropagation (click)="setFilter(item)" [checked]="checkIfChecked(item)">
                <label [for]="i+item" class="check--label" btnCheckbox>
                    <span class="check--label-box"></span>
                </label>
                <span>
                    {{item}}
                </span>
            </li>
        </ng-container>

TS：

  checkIfChecked(item, event?): boolean {
    return this.selectedFilters.includes(item);
  }

  [setFilter(filterValue, event?: Event): void {

    if (this.selectedFilters[0] === filterValue) {
      this.selectedFilters = [];
    } else {
      this.selectedFilters = [filterValue];
    }
     }
    this.selected.emit(this.selectedFilters.map(filter => ({ disName: filter.toString(), value: filter })));
  }

点击时input

单击li元素时

[

标签： javascripthtmlangularcheckboxangular-directive