angular - 单击按钮时选择所有行

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>

typescript :

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];
  }

demo 🚀