Angular中使用ngModel实现PrimeNG DataView动态复选框的全选反选与取值

算力阿峰

2026-10-4

现有代码问题

所有动态生成的p-checkbox都绑定了同一个reqNo变量，且重复使用了相同的inputId，不符合组件复用规范
缺少全选/反选的状态控制变量，没有对应逻辑处理函数

完整实现方案

1. 修改TS文件代码

// 存储所有选中的请求编号
selectedReqNos: string[] = [];
// 全选状态标识
isSelectAll: boolean = false;
// 接口返回的列表数据，原有变量保留即可
requestList: any[] = [];

// 单选项状态变更时触发
onSelectionChange() {
  // 同步全选状态：选中数量等于总列表长度时全选状态为true
  this.isSelectAll = this.selectedReqNos.length === this.requestList.length;
  console.log('当前选中的编号：', this.selectedReqNos);
}

// 全选/反选触发函数
toggleSelectAll() {
  this.selectedReqNos = this.isSelectAll 
    ? this.requestList.map(item => item.requestNo) 
    : [];
}

2. 修改HTML模板代码

<!-- 全选控件，可根据需求换成按钮样式 -->
<p-checkbox 
  label="全选" 
  [(ngModel)]="isSelectAll" 
  [ngModelOptions]="{ standalone: true }"
  (change)="toggleSelectAll()"
></p-checkbox>

<p-dataView [value]="requestList" {...} >
  <ng-template let-request pTemplate="listItem">
    <p-checkbox
      name="reqNo"
      [inputId]="'req-' + request.requestNo"
      [value]="request.requestNo"
      [(ngModel)]="selectedReqNos"
      [ngModelOptions]="{ standalone: true }"
      (change)="onSelectionChange()"
    ></p-checkbox>
    <!-- 此处可补充其他需要展示的列表字段，如申请时间、申请人等 -->
  </ng-template>
</p-dataView>