Select/Unselect 并使用 Angular 中的 ngModel 指令获取动态生成的复选框的值

Question

我有一组来自 API 的数据响应，并使用 PrimeNG 的 DataView 组件在我的 HTML 文件上动态生成复选框。

我的目标是拥有一个功能，我可以通过单击按钮 select/unselect 所有复选框并将它们的值存储在 array 中，例如。

这是我目前所拥有的；

组件HTML

<p-dataView [value]="requestList" {...} >
  <ng-template let-request pTemplate="listItem">
    <p-checkbox
      name="reqNo"
      inputId="reqNo"
      (click)="getCheckBoxValue()"
      value="{{ request.requestNo }}"
      [(ngModel)]="reqNo"
      [ngModelOptions]="{ standalone: true }"
    ></p-checkbox>
  </ng-template>
</p-dataview>

主 TS 文件

reqNo: any; reqNo 使用 ngModel 绑定。

安慰时给我数组值； ['R08000036', 'R08000002']

API 响应中的每个对象如下所示；

{
  requestNo: "R08000036",
  requestBy: "SUPER_USER",
  requestTs: "2021-02-18T04:27:05.710+0000",
  collectTs: "2008-07-30T16:00:00.000+0000",
  testReason: "After Visit",
  noOfPrisoner: 2,
  status: "Printed",
  printTs: "2008-07-21T16:00:00.000+0000",
  escortingOfficer: "00552",
}

getCheckBoxValue 事件处理函数；

getCheckBoxValue() {
  console.log(this.reqNo);
}

我是 Angular 的新手，我认为我使用的 ngModel 有误。有人可以教我吗？

Answer 1

您可以 select 所有值，方法是根据 requestList 中的值为 reqNo 设置一个新值。

selectAll() {
  this.reqNo = this.requestList.map(item => item.requestNo);
}
unselectAll() {
  this.reqNo = [];
}

Example

Select/Unselect 并使用 Angular 中的 ngModel 指令获取动态生成的复选框的值

Select/Unselect and get values of dynamically generated checkbox using ngModel directive in Angular

javascript

typescript

primeng

angular