在使用 PrimeNG 过滤时更新实际值答案

【问题标题】：Updating the actual values upon filtering using PrimeNG在使用 PrimeNG 过滤时更新实际值
【发布时间】：2017-11-09 03:17:59
【问题描述】：

我正在使用 PrimeNG，并在我的表中添加了全局过滤器：

 <input #gb type="text" pInputText size="50" placeholder="Filter">

数据表：

<p-dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

我需要向已过滤的用户发送邮件。然而，我注意到用户计数（用户数量）不会在过滤时更新。

根据表中的过滤器正确显示记录，但邮寄这些用户会将邮件发送给从数据库中检索到的所有用户。

有没有办法在使用 PrimeNG 过滤器选项过滤时更新实际用户数量？

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

DataTable 组件有一个名为filteredValue 的变量，过滤后的值存储在该变量中。有两种获取过滤值的方法：

第一种方式

您可以使用ViewChild 获取对DataTable 对象的引用并获取您过滤的用户：

模板

<p-dataTable #dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

组件

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

@ViewChild('dataTable')
dataTable: DataTable;

既然你已经引用了DataTable组件，那么很容易得到过滤用户：

printFilteredUsers() {
  console.log(this.dataTable.filteredValue);
}

第二种方式

DataTable 组件有一个名为onFilter 的事件，每次过滤DataTable 的内容时都会触发该事件：

模板

<p-dataTable *ngIf="users != null && users.length > 0"
  [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb"
  (onFilter)="printFilteredUsers($event)">

组件

printFilteredUsers(event: any) {
  console.log(event.filteredValue); // filtered users
  console.log(event.filters); // applied filters
}

PrimeNG 的DataTable 有据可查，我建议检查一下。你可以做到here。

【讨论】：