复选框[checked]指令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元素时

[