Angular 7：*ngFor中的动态过滤器

Question

我正在显示以下列表

<tr role="row" *ngFor="let record of recordList | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} | filterColumn: {LastName: filters.lastName}"></tr>

现在我想要做的是从代码/组件中生成| filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization}并将其添加到循环中。

这些过滤器是有条件的，并且我正在创建通用网格。所以我希望可以动态地使用这些过滤器。

我应该如何实现这个？

- Ankur Akvaliya

---

您可能想要查看 https://dev59.com/T1sX5IYBdhLWcg3wJcyW 和 https://angular.io/guide/pipes#no-filter-pipe。 - ABOS

Answer 1

以下是两种做法：

1) 在组件内使用过滤器修改正在循环的数组。如果您按下按钮以激活过滤器，请在按下按钮时在组件中对数组进行过滤。

2) 在ng-container元素中执行循环，并嵌套ngIf：

 <ng-container *ngFor="let record of recordList">
    <tr role="row" *ngIf="record.AccessCode === filters.accessCode"></tr>
 </ng-container>

- Bjarne Gerhardt-Pedersen

---

第二点对我来说不可能。我必须使用过滤器管道来过滤数组。列列表是动态的，所以我不知道显示哪些列以及有多少列。 - Ankur Akvaliya

Answer 2

使用wgnx-filter管道来创建动态过滤条件。

在过滤方法中，您可以配置要应用过滤器的字段并将其发送到管道组件。

在HTML中使用：

<tr *ngFor="let invoice of filterFunction(invoices), index as i">

在 TypeScript 函数中，看以下示例：

filterFunction(collection: any[]): any[] {
    return this.pipefilter.transform(collection, [
      { field: "general.number_invoice", value: this.filterInvoice }, // nested property
      { field: "note_invoice", value: this.filterInvoice },
      { field: "customer_invoice", value: this.filterInvoice },
      { field: "payment_invoice", value: this.filterInvoice }
    ]);
}

您可以动态地使用将用于过滤器的字段组装参数数组。

有关完整示例，请参见stackblitz。

要获取组件文档，请转到npm包wngx-filter。

- Wedson Quintanilha da Silva