Angular4中点击更新按钮获取复选框选中值的实现方法

嘿，我来帮你搞定Angular里复选框选中值获取的问题！你现在的问题主要是所有复选框都绑定了同一个isSelected变量，导致没法单独控制每一行的选中状态，而且也没跟踪哪些项被选中了。下面给你两种实用的解决方案：

方案一：给每个数据项绑定选中状态（简单直接） #

这种方法会给你的parts对象添加一个isChecked属性，用来跟踪该行是否被选中。

1. 初始化数据时添加选中状态 #

在组件里获取到info数据后，给每个条目加上初始的选中状态：

// 假设你是从接口或者服务获取info数据
this.yourDataService.getInfo().subscribe(info => {
  this.info = info.map(part => ({
    ...part,
    isChecked: false // 默认不选中
  }));
});

2. 修改模板中的复选框 #

把原来的[checked]="isSelected"改成双向绑定到parts.isChecked，同时给input的name加上唯一标识避免冲突：

<table>
  <tr *ngFor="let parts of info" class="text-center">
    <td>{{parts.modelD}}</td>
    <td>{{parts.start}}</td>
    <td>{{parts.end}}</td>
    <td>
      <input type="text" class="form-control" 
             name="editable_good_parts_{{parts.id}}"
             value="{{parts.good_parts}}" 
             style="max-width:100px; text-align:center;"/>
    </td>
    <td>
      <input type="checkbox" 
             name="row_id_{{parts.id}}"
             [value]="parts.id" 
             [(ngModel)]="parts.isChecked"/>
    </td>
  </tr>
</table>
<button type="submit" class="btn btn-info" (click)="onUpdate()">Update Data</button>

3. 实现按钮点击逻辑 #

在组件里添加onUpdate方法，筛选出所有选中的项：

onUpdate() {
  // 筛选出isChecked为true的项，提取它们的id
  const selectedPartIds = this.info
    .filter(part => part.isChecked)
    .map(part => part.id);
  
  console.log('选中的零件ID:', selectedPartIds);
  // 这里就可以用selectedPartIds去执行你的更新逻辑了
}

方案二：维护一个选中ID数组（不修改原数据） #

如果你不想给原数据对象添加额外属性，可以单独维护一个数组来记录选中的ID。

1. 在组件里定义选中数组 #

selectedPartIds: number[] = [];

2. 修改模板复选框 #

绑定checked状态和change事件来更新选中数组：

<td>
  <input type="checkbox" 
         name="row_id_{{parts.id}}"
         [value]="parts.id" 
         [checked]="selectedPartIds.includes(parts.id)"
         (change)="togglePartSelection(parts.id)"/>
</td>

3. 实现切换选中状态的方法 #

togglePartSelection(partId: number) {
  const idIndex = this.selectedPartIds.indexOf(partId);
  if (idIndex > -1) {
    // 已经选中，从数组移除
    this.selectedPartIds.splice(idIndex, 1);
  } else {
    // 未选中，添加到数组
    this.selectedPartIds.push(partId);
  }
}

4. 按钮点击逻辑 #

直接使用selectedPartIds即可：

onUpdate() {
  console.log('选中的零件ID:', this.selectedPartIds);
  // 执行你的更新操作
}

重要注意事项 #

别忘了在你的模块里导入FormsModule，因为我们用到了ngModel：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块（比如BrowserModule）
    FormsModule
  ],
  // ...其他配置
})
export class YourComponentModule { }

这样修改后，点击更新按钮就能轻松获取所有选中复选框的值啦！

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