基于函数的复选框状态 Angular

Question

在我的组件中，我有两个项目数组：allItems 和 selectedItems（当然，这里使用虚拟名称）。选择由复选框控件处理，它们的状态取决于是否在 selectedItems.

中找到项目

由于我需要根据表达式评估复选框状态，因此我需要调用一个函数，如下所示：

<div *ngFor="let item of allItems; let i = index">
    <input type="checkbox"
                [checked]="itemChecked(item .Id)"
                (change)="toggleItem(i)">
    <label class="form-check-label" [for]="item.Id">{{ item.Value }}</label>
</div>

函数是这样的：

itemChecked(id: number) {
    return this.selectedItems.findIndex(x => x.Id == id) > -1;
}

问题是 itemChecked 不停地执行。我之前读过这可能可以使用指令来解决，但即使是这样，我也找不到任何具体的例子。

如有任何帮助，我们将不胜感激。

Answer 1

您可以创建自定义管道以检查更改。

自定义管道

@Pipe({
  name: 'isItemChecked'
})
export class IsItemCheckedPipe implements PipeTransform {

  transform(selectedItems: any[], id: number) {
    return selectedItems.findIndex(x => x.Id === id) > -1;
    // Or
    // return selectedItems.some(x => x.Id === id);
  }

}

并且在模板中：

<input type="checkbox"
                [checked]="selectedItems | isItemChecked:item.Id"
                (change)="toggleItem(i)">

基于函数的复选框状态 Angular

Checkbox state based on function Angular

checkbox

angular-template

angular

angular-changedetection