如何在Angular+TypeScript中点击按钮获取*ngFor网格checkbox选中项

1. 调整组件TS逻辑 #

首先在你的.ts组件文件中新增选中项存储数组、选中状态变更处理方法，同时修正按钮触发方法的名称（你的HTML按钮绑定的是startW，现有TS中方法名为startWf，需保持一致）：

// 存储所有选中的行数据
selectedHubs: any[] = [];

/**
 * 复选框选中状态变更处理
 * @param event 复选框触发事件
 * @param hub 当前行对应的数据对象
 */
onHubSelectionChange(event: Event, hub: any) {
  const checkBox = event.target as HTMLInputElement;
  if (checkBox.checked) {
    // 选中时追加到选中数组
    this.selectedHubs.push(hub);
  } else {
    // 取消选中时从数组中移除，用SITE_ID作为唯一标识匹配
    const targetIndex = this.selectedHubs.findIndex(item => item.SITE_ID === hub.SITE_ID);
    if (targetIndex !== -1) {
      this.selectedHubs.splice(targetIndex, 1);
    }
  }
}

// 按钮点击触发方法，与HTML绑定的方法名保持一致
startW(num: number) {
  // 此处selectedHubs就是所有选中的行数据，可直接用于业务逻辑
  console.log('已选中的行数据：', this.selectedHubs);
}

2. 修改HTML模板配置 #

调整表格中复选框的绑定逻辑，移除无效的value属性，新增选中状态变更事件绑定：

<tr *ngFor="let hub of asyncNewLinkHubModel | async  | paginate: { id: 'activities', itemsPerPage: 5, currentPage: p }">
  <td>
    <input type="checkbox"
      name="chkHub"
      (change)="onHubSelectionChange($event, hub)"
      <!-- 可选配置：跨分页保留选中状态，切换分页后自动回显已选的项 -->
      [checked]="selectedHubs.some(item => item.SITE_ID === hub.SITE_ID)"
    />
  </td>
  <!-- 其余单元格代码保持不变 -->
</tr>

说明：原有value="{{hub}}"配置无效，因为对象插值会被转为[object Object]字符串，无法获取原始数据对象，因此直接通过事件传递当前遍历的hub对象即可。

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