如果頁面包含多個樹表，則帶有復選框的primeng樹表無法按預期作業

我正在開發角度應用程式。我正在使用樹表

   <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 >
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span >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 >
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span >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>

堆疊閃電戰::

https://stackblitz.com/edit/primeng-treetableselection-demo-py68pi?file=src/app/app.component.html

代碼作業正常，但問題是如果我的 html 頁面中有兩個樹表，如 stackblitz 和上面的示例所示。如果我檢查第一個表的第一個元素，則第二個表的第一個元素會自動被檢查，反之亦然。其他元素也一樣。我該如何解決這個問題？

uj5u.com熱心網友回復：

兩個表選擇都系結到同一個變數，[(selection)]="selectedNodes3"因此一旦您在一個表中選擇一個節點，另一個表將顯示相同的選擇，這要歸功于角度雙向資料系結（https://angular.io/guide/two-way-binding）。

因此，為了解決您的問題，您只需使用兩個不同的變數來存盤選擇。

第一張表：

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

第二張表：

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[];
...

uj5u.com熱心網友回復：

您使用的是相同的變數，因此是相同的參考。因此，當您更新值時，兩個視圖都會更新。您可以使用 lodash 的 cloneDeep() 復制變數而不參考，然后您可以在第二個表中使用它。

標籤：

上一篇：將材質ui集成到angularbazel專案中

下一篇：PrimeNG的p-pickList是否在更改源和目??標？