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

Question

I am displaying list like below

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

Now what i want to do is generate | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} from code/component & add it to for loop.

These filters are conditional & i am creating generic grid. So i want to do these filters dynamically

How can i achieve this

Answer 1

Here are two ways of doing it:

1) Modify the array your looping through in your component with your filters. If you press a button to activate a filter, do the filtering on the array in the component when the button is pressed.

2) Do your loop in a ng-container element, and have ngIf nested underneath:

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

Answer 2

Use wgnx-filter pipe to make your dynamic filter conditions.

In the filter method, you can be configure fields to apply the filter and sent to pipe component.

In html, use:

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

In typescript function, see the sample:

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

You can assemble the parameter array with the fields that will be used in the filter dynamically.

For a complete example, see stackblitz

For get component documentation, got to npm package wngx-filter