I was following the following answer https://stackoverflow.com/a/47738717/12360035 and I tried to implement the code in my own solution, but it seems to fail. In my configuration there's a list of users generated and on top of that field there's a search bar used for searching users. Please see code for more information. My search.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(!value)return null;
if(!args)return value;
args = args.toLowerCase();
return value.filter(function(item){
return JSON.stringify(item).toLowerCase().includes(args);
});
}
}
users.component.html:
...
<div class="col-lg-12">
<p class="list-header">Element overview</p>
<div class="form-group"><!--
<label for="filter" class="lb-sm">Filter</label> -->
<input type="text" class="form-control input-sm" name="filter" placeholder="Filter" id="filter" [(ngModel)]="query">
</div>
<select name="userSelect" size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem" (change)="clickItem($event.target.value)">
<option *ngFor="let user of users | search: query" value="{{user.firstname}}">
{{user?.lastname}}, {{user?.firstname}}
</option>
</select>
</div>
...
My users.component.ts:
...
export class UsersComponent implements OnInit {
public search:any = '';
...
I get the error Identifier 'query' is not defined. The component declaration, template variable declarations, and element references do not contain such a member two times - at ngModel and in the ngFor pipe.
Also the searchable items are last names and first names so they start with a capital letter.
** UPDATE ** My JSON received from my BackEnd is the following:
[{"_id":"5df0f0dbb97cfc2f3c4b6381","firstname":"Chad","lastname":"Johnson","password":"$2b$10$Dk09I8Qtgb/x76kqD/8are/4l/ir4Rp1vVS9DFp5T6lIGw0ldLu/O","eMail":"chad@johnson.com","active":true,"__v":0},{"_id":"5df8ba0f99a34e2070aad054","firstname":"John","lastname":"Smith","password":"$2b$10$Szcw9PZfoYA.lIA843.wt.HE99vQhoWdnMdFmlWUXFgcsdZ8sEvri","eMail":"john@smith.com","active":true,"__v":0},{"_id":"5e15da927932c92e448c3574","firstname":"Maret","lastname":"Smith","password":"$2b$10$0cd7qTf0k9NNICfiVF1ddu/w0XftGU2EkYMXZlIuEj06hd8SU1qle","eMail":"maret@smith.com","active":true,"__v":0}]
What am I doing wrong?
