获取数组中树 table 的选中项

Question

我正在开发 angular 应用程序。我正在使用 primeng 树 table。我的代码如下：

<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"
>
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header }}
      </th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowNode
    let-rowData="rowData"
    let-columns="columns"
  >
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler
          [rowNode]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableToggler>
        <p-treeTableCheckbox
          [value]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableCheckbox>
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Stackblitz::

https://stackblitz.com/edit/primeng-treetableselection-demo-xwgbzk?file=src%2Fapp%2Fapp.component.html

我想在我的组件中使用一个新数组来捕获用户检查的所有元素。假设如果用户选择 parents，因为它是一棵树 table，所以所有 children 都会被检查，所以数组将包含所有 children 元素。假设如果用户只选择一个 children 而不是那个特定的 children 应该在那个数组中并且如果用户取消选中那么这些元素应该从数组中删除。我该怎么做？

Answer 1

我已经实现了一种方法来监听 prime ng table 发出的检查和取消检查事件。

    nodeSelect(event) {
        this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name });
        this.addItemsToArray(event);
    }

    nodeUnselect(event) {
        this.messageService.add({ severity: 'info', summary: 'Node Unselected', detail: event.node.data.name });
        this.removeItemsFromArray(event);
    }

    selectedItems = [];

    addItemsToArray(event: any) {
        console.log(event);
        if (!event.node) return;
        if (event.node.children && !event.node.parent) {
            for (let child of event.node.children) {
                this.selectedItems.push(child.data);
            }
        } else if (event.node.data && event.node.parent) {
            this.selectedItems.push(event.node.data);
        }
        console.log('selectedItems after add:', this.selectedItems);
    }


    removeItemsFromArray(event: any) {
        console.log(event);
        if (!event.node) return;
        if (event.node.children && !event.node.parent) {
            for (let child of event.node.children) {
                this.selectedItems.splice(this.selectedItems.indexOf(child.data), 1);
            }
        } else if (event.node.data && event.node.parent) {
            this.selectedItems.splice(this.selectedItems.indexOf(event.node.data), 1);
        }
        console.log('selectedItems after remove:', this.selectedItems);
    }

这是一个工作示例：https://stackblitz.com/edit/primeng-treetableselection-demo-yl1xbx?file=src%2Fapp%2Fapp.component.ts

获取数组中树 table 的选中项

Getting checked items of tree table in an array

primeng

angular

angular8

angular9

angular10