Question

我有一个角度2项目，它使用了primeng table wih多选功能。所选值存储在[（选择）]中。我的问题是如何调用/使用component.ts中的[（selection）]值。我尝试在控制台中记录[（选择）]值，但收到错误。

<p-dataTable [value]="persons" selectionMode="multiple" [(selection)]="selectedPersons" dataKey="personId">
    <p-header>Excluded Stores</p-header>
    <p-column field="personId" header="person Id" [sortable]="true"></p-column>
    <p-column field="personFirstName" header="First Name" [sortable]="true"></p-column>
    <p-column field="personLastName" header="Last Name" [sortable]="true"></p-column>                   
</p-dataTable>
<button (click)="showPersonsSelected()"> Show List of person selected </button>

在我的组件中

export class SelectclusterComponent{

persons = [];

selectedPersons: person [];

showPersonsSelected(){
 console.log(this.selectedPersons);
}

}

Answer 1

您还可以使用ViewChild直接在组件中访问Datatable类：

模板：

<p-dataTable #tbUsers ...></p-dataTable>

组件

import { ViewChild } from '@angular/core';
import { DataTable } from 'primeng/primeng';

@ViewChild('tbUsers') tbUsers: DataTable;

rowSelected(){
    console.log(this.tbUsers.selection);
}

Answer 2

请将函数onRowSelect添加到下面的标签p-dataTable中：

<p-dataTable [value]="persons" selectionMode="multiple" [(selection)]="selectedPersons" dataKey="personId" (onRowSelect)="onRowSelect($event)">

在.component.ts中获取以下所选行的信息：

onRowSelect(event) {
    console.log(`Query selected: ${event.data.orderNumber} - ${event.data.country}`);
  }

Answer 3

您应该使用onRowSelected事件，如下所示

<p-dataTable (onRowSelect)="rowSelected($event)" selectionMode="multiple"
          [value]="tableData" [(selection)]="selectedData" 
           dataKey="model" [responsive]="true">
    <p-column field="orderNumber" header="Order Number"></p-column>
    <p-column field="country" header="Country"></p-column>
</p-dataTable>

您拥有所选项目

 rowSelected(event){
    console.log(this.selectedData);
  }

LIVE DEMO

如何获取primeNg数据表的[（选择）]的日期。 Angular 2

3 个答案: