Trying to filter data in *ngFor directive

Question

I\'m trying to filter my array data on a table from Angular with the package w-ng5, but it\'s searching and it doesn\'t find nothing (blank list). This is the s

Answer 1

Good night!

So, please tell w-ng5 that your filter is not applied to a simple string structure but rather to a complex object. To do this, in the filter syntax in * ngFor, use the following format:

<tr *ngFor="let invoice of invoices | filter : [
                                            {field:'number_invoice' , value:filterInvoice}, 
                                            {field:'note_invoice' , value:filterInvoice},
                                            {field:'customer_invoice' , value:filterInvoice},
                                            {field:'payment_invoice' , value:filterInvoice}
                                            ] 
         paginate: { itemsPerPage: 10, currentPage: page }, index as i">

I implemented your stackblitz example, however, I removed the paging pipes: https://stackblitz.com/edit/angular-vlzd3f

Note that for complex objects, you need to tell the filter which attributes you want to apply the filter to. In the example I implemented, I applied the filter over the four fields: number_invoice, note_invoice, customer_invoice e payment_invoice

However, note that the component has been upgraded to a version already with angle 7 and with a new feature, it has now ignored accents in the filtered values. The new component name also changed to wngx-filter (https://www.npmjs.com/package/wngx-filter).

Hope this helps

Answer 2

You can create a filter function that is called whenever your filter string changes.

The code will look something like this:

  isMatch(item) {
    if (item instanceof Object) {
      return Object.keys(item).some((k) => this.isMatch(item[k]));
    } else {
      return item.toString().indexOf(this.filterString) > -1
    }
  }

This will iterate through the object recursively, and look for any matches. While it's not necessary (seeing as your object structure is flat), it could be useful if your structure ever changes. Bear in mind it's case sensitive as it stands

You then need to create a function that calls it, like so:

onFilterChange() {
  this.filtered = this.invoices.filter((invoice) => this.isMatch(invoice));
}

And amend your input so that it refilters any time that the search string is changed

<input [(ngModel)]="filterString" (ngModelChange)="onFilterChange()" />

Here is a Stackblitz demo

Answer 3

you can filter array data on each column of a table still using w-ng5 module

simply change

<tr *ngFor="let invoice of invoices | filter : filterInvoice | 
    paginate: { itemsPerPage: 10, currentPage: page }, index as i">

to

<tr *ngFor="let invoice of invoices | filter:[
    {field:'number_invoice', value: searchValue}, 
    {field:'note_invoice', value: searchValue}, 
    {field:'state_invoice', value: searchValue}, 
    {field:'customer_invoice', value: searchValue},
    {field:'date_invoice', value: searchValue},
    {field:'days_invoice', value: searchValue},
    {field:'expiration_invoice', value: searchValue}, 
    {field:'payment_invoice', value: searchValue}] | 
    paginate: { itemsPerPage: 10, currentPage: page }, 
 index as i">

This will repeatedly check through the object, and look for similarities