使用 PrimeNG 过滤后更新实际值

Question

我正在使用 PrimeNG，并将全局过滤器添加到我的 table:

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

数据table:

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

我需要给被过滤的用户发送邮件。但是我注意到用户数（用户数量）不会根据过滤器更新。

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

是否可以使用 PrimeNG 过滤器选项更新实际用户数量？

Answer 1

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

First way

您可以使用 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);
}

Second way

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.

使用 PrimeNG 过滤后更新实际值

Updating the actual values upon filtering using PrimeNG

angular

primeng

primeng-datatable