2

我在我的 Angular JS 应用程序中使用 PrimeNG Ultima 主题。我有如下所示的数据表，其中包含多项选择和行分组。

<p-dataTable #restrictionDT 
      [value]="apprestrictions" 
      selectionMode="multiple" 
      [(selection)]="selectedApprestrictions" 
      sortField="belongsTo" 
      rowGroupMode="subheader" 
      groupField="belongsTo" 
      expandableRowGroups="false" 
      [responsive]="true">
          <ng-template pTemplate="rowgroupheader" let-rowData>
                      {{rowData['belongsTo']}}
          </ng-template>
       <p-column selectionMode="multiple"></p-column>
       <p-column field="id" header="ID"></p-column>
       <p-column field="name" header="Name"></p-column>
       <p-column field="displayBelongsTo" header="Belongs To"></p-column>
</p-dataTable>

我可以看到我的数据表，如下所示。我可以选择单个行，可以选择多行，如果我选中顶部的复选框，我也可以选择所有行。

数据表

我们需要对行进行分组，我也可以这样做。我们的要求是在行组标题中我们需要添加复选框，以便如果用户选中该复选框，则必须选中属于该行组的行。例如，在我的数据表中，我将在 A1 旁边添加复选框。如果选中，则必须选择 ID 为 1 和 5 的两行，但不能选择其他行。

我已经联系了 PrimeNG 团队，他们说现在 p-datatable 将不支持我们想要的。所以我想看看我能做什么。从调试中我注意到每一行都有 p-dtcheckbox 和 ng-reflect-checked 将在检查时为真，否则为假。所以我试图在我的打字稿代码中设置它。谁能告诉我如何做到这一点。 在此处输入图像描述

请在下面查看我的代码

import { Component, OnInit, ViewChild, OnDestroy, ElementRef } from '@angular/core';

@ViewChild('restrictionDT') restrictionDT: ElementRef;

console.log(this.restrictionDT);

console.log(this.restrictionDT) 效果很好，我可以在浏览器控制台中看到数据表。但是 this.restrictionDT.nativeElement 是未定义的，所以我被卡住了

更新 我做了以下更改，现在可以在我的控制台日志中看到 p-datatable。现在我想为特定行组循环每一行并选择复选框。

@ViewChild('restrictionDT') restrictionDT: any;

console.log(this.restrictionDT.el.nativeElement);

解决方案 ：

我能够解决这个问题。数据表有一个名为 selection 的属性，它绑定到您的 component.ts 文件中的一个属性，该属性是数组类型。只需将元素添加到您想要选择的那个数组中。就是这么简单。

<p-dataTable [value]="apprestrictions" selectionMode="multiple" [(selection)]="selectedApprestrictions"

在您的 component.ts 中执行此操作

selectedApprestrictions: AppRestriction[] = [];
this.selectedApprestrictions.push({ id: 1, name: 'Restriction 1', belongsTo: 'A1', belongsToIndicator: ['A'], displayBelongsTo: 'A1' });
this.selectedApprestrictions.push({ id: 5, name: 'Restriction 5', belongsTo: 'A1', belongsToIndicator: ['A, S'], displayBelongsTo: 'A1' });
4

0 回答 0