if array is a object of Array type, it can't work about ngx-filter-pipe

[VadimDez]

@lzm420241, could you show me example of the object?

[lzm420241]

@VadimDez my ex array like this:
[{ id: 1, name: "fkds", sub:[ {id:1,name: "dks"} ]} ]

when i input 1, then it show nothing
and i input "f", then it show errMsg "t.toLowerCase is not a function".

[VadimDez]

@lzm420241 can you show me what do you pass to filterBy as well ?

[lzm420241]

<label>key:</label><input type="text" [(ngModel)]="stringFilter" >
<li *ngFor="let item of List | filterBy: stringFilter ">
<span>{{ item.name }}</span>
</li>
and list is
[{ id: 1, name: "fkds", sub:[ {id:1,name: "dks"} ]} ]

[VadimDez]

You can't filter object with just a string, you need to make stringFilter object as well, and if you want to filter by name - you have to make:

stringFIlter = { name: '' }

and in your html instead of [(ngModel)]="stringFilter" do [(ngModel)]="stringFilter.name"

[lzm420241]

@VadimDez thx, it solved problem,but if my html is
<label>key:</label><input type="text" [(ngModel)]="stringFilter" >
<li *ngFor="let item of List | filterBy: stringFilter ">
<span>{{ item.name }}</span>
<ul *ngIf =" item.sub ">
<li *ngFor = " let value of item.sub | filterBy: stringFilter">{{ value.name}}<li>
</ul>
</li>

when i search sub :[name : "dks"], then because of item.name != search.value ,then the it can't show the child of li, i didn't find the API about one conditon for filter mutiple data in ng2-filter-pipe, how to solve this problem?

[VadimDez]

Not sure, but maybe something like this ?

<label>key:</label>
<input type="text" [(ngModel)]="stringFilter" >
<li *ngFor="let item of List" *ngIf="(item.sub | filterBy: stringFilter).length">
  <span>{{ item.name }}</span>
  <ul *ngIf =" item.sub ">
    <li *ngFor = " let value of item.sub | filterBy: stringFilter">{{ value.name}}<li>
  </ul>
</li>

[lzm420241]

@VadimDez *ngFor and *ngIf can't use together!and by this way, it only search for sub :[name : "dks"],right?

[cgowez]

Hi @VadimDez , first thanks for this package, it's great, however I would like to use it filtering multiple values, can you help me on how to use it? this is what I tried:

private stringFilter = { name: '', position: '', city: '' };

<input type="text" [(ngModel)]="stringFilter">
<ul *ngIf="peopleList">
    <li *ngFor="let item of peopleList | filterBy: stringFilter">
        {{item.name}}, {{item.position}}, {{item.city}}
    </li>
</ul>

I want to filter by name, position or city and I don't know how to specify this.
If I set [(ngModel)]="stringFilter.name" it works just for name, how can I cover for the other values?
Thanks for your help.

[VadimDez]

@cgowez, you can try to create one input field for each field in your filter.
Something like this:

<input type="text" [(ngModel)]="stringFilter.name" name="name" placeholder="Name">
<input type="text" [(ngModel)]="stringFilter.position" name="position" placeholder="Position">
<input type="text" [(ngModel)]="stringFilter.city" name="city" placeholder="City">

[cgowez]

I thought on that however I don't think it's the best approach for user friendly, I'm thinking to create a new string with those three values, thanks for your quick response.

[cgowez]

hey @VadimDez this is what I did and worked as expected:
I added another value on the JSON response with the other values combined.

.json:
"together": "name position city',

.ts:
private stringFilter = { together: ''};

.html:
<label>Filter: </label><input type="text" [(ngModel)]="stringFilter.together">

<ul *ngIf="peopleList">
    <li *ngFor="let item of peopleList | filterBy: stringFilter">
        {{item.name}}, {{item.position}}, {{item.city}}
        <div style="display: none">{{item.together}}</div>
    </li>
</ul>

It works great, thanks.