Angular中无需触发事件统计选中复选框数量可行吗？

当然可以！完全不用靠事件监听就能实现这个需求，Angular自带的变更检测和双向绑定机制就能帮你实时更新选中项的数量。先帮你指出现有代码里的小问题：你写的{{item.checked.length}}是错的——item是循环里的单个列表项，item.checked是布尔值，根本没有length属性，你需要针对整个items数组来统计。

下面给你两种实用的实现方式：

方式1：直接在模板中计算（简单场景首选） #

你可以直接在模板里用数组的filter方法筛选出checked为true的项，再取长度：

<div *ngFor="let item of items; let i = index" class="form-check">
  <input type="checkbox" class="form-check-input" id="itemCheck{{i}}" name="item{{i}}" [(ngModel)]="item.checked" />
  <label class="form-check-label" for="itemCheck{{i}}">{{item.Name}}</label>
</div>
<p>已选中：{{items.filter(item => item.checked).length}} 项</p>

原理很简单：当你勾选/取消复选框时，[(ngModel)]会自动更新对应item.checked的值，Angular的变更检测会感知到数组的变化，重新计算filter的结果并更新页面——全程不需要任何事件绑定。

方式2：组件内定义计算属性（复杂场景更推荐） #

如果你的列表逻辑比较复杂（比如后续要加搜索、过滤），把统计逻辑放到组件类里会更清晰，也方便复用。在组件类里写一个getter：

// 组件类代码
export class YourComponent {
  items = [
    // 示例数据结构
    { Name: "项1", checked: false },
    { Name: "项2", checked: true },
    { Name: "项3", checked: false }
  ];

  get selectedItemCount(): number {
    return this.items.filter(item => item.checked).length;
  }
}

然后在模板里直接调用这个计算属性：

<div *ngFor="let item of items; let i = index" class="form-check">
  <input type="checkbox" class="form-check-input" id="itemCheck{{i}}" name="item{{i}}" [(ngModel)]="item.checked" />
  <label class="form-check-label" for="itemCheck{{i}}">{{item.Name}}</label>
</div>
<p>已选中：{{selectedItemCount}} 项</p>

这种方式的好处是，统计逻辑集中在组件里，模板更简洁，而且如果以后需要修改统计规则（比如只统计某个分类下的选中项），直接修改selectedItemCount的逻辑即可，不用动模板。

为什么不需要事件？ #

因为你用了[(ngModel)]双向绑定，它已经帮你处理了复选框状态和数据模型的同步。当用户操作复选框时，Angular会自动更新item.checked的值，然后触发变更检测，更新页面上的统计数值——全程不需要额外绑定click或change事件。

内容的提问来源于stack exchange，提问作者user749798