AngularJS 2 - Primeng DataTable - множественный выбор, группировка строк: установите флажки для строк во время выполнения

Question

Я использую тему PrimeNG Ultima в своем приложении Angular JS. У меня есть дата, как показано ниже, с множественным выбором и группировкой строк.

<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-refle-check будет 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"

В вашем 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' });