如果页面包含不止一棵树 table，带有复选框的 primeng 树 table 无法按预期工作

Question

我正在开发 angular 应用程序。我正在使用树 table

   <p-toast></p-toast>

<h5>Checkbox Selection</h5>
<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
  <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
          id="{{ i }}"
          [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>

............................................................................................................................................................................................................
<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
  <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
          id="{{ i }}"
          [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-py68pi?file=src%2Fapp%2Fapp.component.html

代码工作正常，但问题是如果我的 html 页面中有两棵树 table，如 stackblitz 和上面的示例所示。如果我检查第一个 table 的第一个元素，那么第二个 table 的第一个元素会自动被检查，反之亦然。其他元素也一样。我该如何解决？

Answer 1

您使用的是同一个变量，因此是同一个引用。因此，当您更新值时，两个视图都会更新。你可以使用 lodash 的 cloneDeep() 来复制没有引用的变量然后你可以在你的第二个 table.

中使用它

Answer 2

两个 tables selection 都绑定到同一个变量 [(selection)]="selectedNodes3" 所以一旦你 select 一个节点 table 另一个就会显示由于 angular two-way 数据绑定 ( https://angular.io/guide/two-way-binding )，相同的 selection。

因此，为了解决您的问题，您只需使用两个不同的变量来存储 selection。

第一table:

p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
...

第二个table:

p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="secondTableSelectedNodes3" // <-- This variable must be different from the first table
  dataKey="name"
>
...

然后在你的组件ts中你必须声明两个变量：

...
public selectedNodes3: TreeNode[];
public secondTableSelectedNodes3: TreeNode[];
...

如果页面包含不止一棵树 table，带有复选框的 primeng 树 table 无法按预期工作

primeng tree table with checkbox not working as expected if a page contains more than one tree table

primeng

angular