AngularJS 2 - Primeng DataTable - 多选，行分组：在运行时设置行的复选框

Question

我在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在检查时为true，否则为false。所以我试图在我的打字稿代码中设置它。任何人都可以告诉我如何做到这一点。

请参阅下面的代码

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"

在你的组件中。执行此操作

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' });