单击按钮时选择所有行

Question

我有一张primeng桌子。当我单击按钮时，我希望选择所有行。

html:

<p-table [columns]="columns" [value]="values"
         selectionMode="multiple" [(selection)]="selectedValues"
         (onRowSelect)=selectRow(selectedValues)
         (onRowUnselect)="unselectRow($event)" #table>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-val>
    <tr [pSelectableRow]="val">
      <td *ngFor="let col of columns">
        {{val[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

<div class="table-button">
  <p-button (onClick)="selectAll()">Select All</p-button>
  <p-button>Remove</p-button>
</div>

打字稿：

import {Component, OnInit, ViewChild} from '@angular/core';
import {Model} from "../../models/model.model";

@Component({
  selector: 'app-comp',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
  @ViewChild('table', {static: false}) table;

  //left out for now
  //values: Model[];

  columns: any[];

  selectedValues: Model[] = [];

  constructor() { }

  ngOnInit() {
    this.columns = [
      { field: 'Id', header: 'ID' },
      { field: 'startTime', header: 'Start Time' },
      { field: 'endTime', header: 'End Time' },
      { field: 'description', header: 'Description' },
      { field: 'insertUser', header: 'Create User' },
      { field: 'insertTime', header: 'Create Eastern Time' },
    ]
  }

  selectRow(event){
    console.log("selected row!");
  }

  unselectRow(event){
    console.log("unselected a row!")
  }

  selectAll(){
    console.log("select all is clicked");
    for (var i = 0; i < this.values.length; i++){
      this.selectedValues[i] = this.values[i];
    }
    console.log(this.table);
  }

}

当我单击按钮并检查控制台以查看其 _selection 值时，我可以看到整个表已被选中。这是因为我有 for 循环将数据数组添加到表选择数组中。执行此操作后，如果我单击任何行，则单击的行显示为未单击（未突出显示），所有其他行显示为单击（突出显示）。因此，从这种行为来看，除了突出显示之外，我选择所有行的方法似乎也有效。

所以我的问题是：

有没有更好的方法，更少的“hacky”方法来选择所有行并显示它们被选择（突出显示），而不是使用 for 循环将它们添加到我的选择数组中？

如果此方法是选择所有行的最合乎逻辑的方法，那么当我单击按钮时，如何将所有行表示为选定（突出显示）？

Answer 1

primeng 表检查行 Item 是否在列表（selectedValues）内，并且其基础将添加类以突出显示所选行，只需将数据项设置在列表内，就像这样this.selectedValues = [...this.values];即可完成工作，以防万一您使用复选框选择可以使用此组件的行<p-tableHeaderCheckbox></p-tableHeaderCheckbox>，但它执行相同的逻辑

`

  selectAll(){
    this.selectedValues = [...this.dataSet];
  }

演示