时间戳

首页 > 解决方案 > 在Angular中使用ngModel指令选择/取消选择并获取动态生成的复选框的值

javascript - 在Angular中使用ngModel指令选择/取消选择并获取动态生成的复选框的值

问题描述

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

目标是拥有一个功能，例如，我可以通过单击按钮选择/取消选择所有复选框并将它们的值存储在 中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 错误。有人可以教我吗？

标签： javascriptangulartypescriptprimeng

解决方案

您可以通过 requestList 中的值为 reqNo 设置新值来选择所有值。

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

例子

推荐阅读