angular - AngularJS 2 - Primeng DataTable - Flera val, radgruppering: Ställ in kryssrutor för rader vid körning

Jag använder PrimeNG Ultima-tema i min Angular JS-applikation. Jag har en datatabell som nedan med multipel markering och radgruppering.

<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>

Jag kan se min datatabell som nedan. Jag kan välja enskild rad, kan välja flera rader, jag kan också välja alla rader om jag markerar kryssrutan överst.

Vi har ett krav på att gruppera rader och jag kan också göra det. Vårt krav är att vi i radgruppens rubrik behöver lägga till en kryssruta så att om användaren kryssar i den kryssrutan, måste endast raderna som tillhör den radgruppen markeras. Till exempel i min datatabell kommer jag att lägga till en kryssruta bredvid A1. Om den är markerad måste två rader med ID 1 och 5 väljas men inte andra.

Jag har redan kontaktat PrimeNG-teamet och de säger att p-datatable för närvarande inte kommer att stödja det vi vill. Så jag försöker se vad jag kan göra. Från debug märkte jag att varje rad har p-dtcheckbox och ng-reflect-checked kommer att vara true när den är markerad och false när den inte är det. Så jag försöker sätta det i min TypeScript-kod. Kan någon säga hur man gör detta?

Vänligen se min kod nedan

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

@ViewChild('restrictionDT') restrictionDT: ElementRef;

console.log(this.restrictionDT);

console.log(this.restrictionDT) fungerar bra och jag kan se datatabellen i min webbläsares konsol. Men this.restrictionDT.nativeElement är odefinierat, så där sitter jag fast

UPPDATERING Jag gjorde ändringarna nedan och kan nu se p-datatable i min konsollog. Nu vill jag loopa igenom varje rad i en viss radgrupp och välja kryssrutorna.

@ViewChild('restrictionDT') restrictionDT: any;

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

LÖSNING :

Jag kan lösa problemet. Data Table har en egenskap som kallas selection som är bunden till en egenskap i din component.ts-fil som är av array-typ. Lägg bara till de element i den arrayen som du vill ska vara valda. Det är allt, det är enkelt.

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

I din component.ts gör detta

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