TurboTable select/unselect 以编程方式

Question

我有一个带有复选框选择的 TurboTable 定义，如下所示：

<p-table [columns]="cols" [value]="dataJSONArray" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" dataKey="OrderId">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col style="width: 3em">
      <col *ngFor="let col of columns" [ngStyle]="{'width': col.widthPx + 'px'}">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
      <td>
        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
      </td>
...

如果我更改 dtSelectedRows 数组（选择），什么也不会发生（dtSelectedRows 数组更改，但选中的列不会更改 - 保持选中状态 -）：

this.dtSelectedRows.splice(indx, 1);

但是如果我将一个数组分配给 dtSelectedRows 数组，更改就会生效：

let dummySelectedRow = Object.assign([], this.dtSelectedRows);
dummySelectedRow.splice(indx, 1);
this.dtSelectedRows = dummySelectedRow;

Answer 1

您需要将选择模式属性设置为 single 在这种情况下 dtSelectedRows 将引用所选值数组的对象实例。

<p-tableHeaderCheckbox></p-tableHeaderCheckbox> set selection mode to multiple selection , you can solve this is to use p-tableRadioButton (radio button) if you want to support single selection mode

<p-table  [columns]="cols" [value]="data" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" >
  <ng-template pTemplate="header">
    <tr>
      <th>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
       <td>
        <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
      </td>
      <td *ngFor="let col of cols">{{rowData[col.field]}}<td>
    </tr>
  </ng-template>
</p-table>

通过方法设置选中项

  setSelectedItem(){
    this.dtSelectedRows = this.data[0];
  }

如果您想在多个模式下根据条件删除项目

  removeUnvalidItem(){
    if (this.dtSelectedRows) {
      this.dtSelectedRows = this.dtSelectedRows.filter(car => car.year > 2005) 
    }
  }

stackblitz demo

TurboTable select/unselect 以编程方式

TurboTable select/unselect programmatically

primeng

angular

primeng-turbotable