Select 单击按钮时的所有行

Question

我有一个 primeng table。当我单击一个按钮时，我希望所有行都被 selected。

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 值时，我可以看到整个 table 已 selected。这是因为我有 for 循环将数据数组添加到 table select 离子数组。执行此操作后，如果我单击任何行，则单击的行显示为未单击（未突出显示），所有其他行显示为已单击（突出显示）。因此，从这种行为来看，我 selecting 所有行的方法似乎在突出显示之外起作用。

所以我的问题是：

有没有更好的方法，less 'hacky' 方法 select 所有行并显示它们是 selected（突出显示）而不是使用 for 循环将它们添加到我的 select离子阵列?

如果此方法是 select 所有行的最合乎逻辑的方法，我如何在单击按钮时将所有行表示为 selected（突出显示）？

Answer 1

primeng table 检查行项目是否在列表 (selectedValues) 中，其基础将添加 class 以突出显示 selected 行要做到这一点，只需在列表中设置数据项，就像这样 this.selectedValues = [...this.values]; 就可以完成工作，如果您使用复选框到 select 行，您可以使用此组件 <p-tableHeaderCheckbox></p-tableHeaderCheckbox> 但它做同样的逻辑

`

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

demo

Select 单击按钮时的所有行

Select all rows on button click

angular

primeng-datatable