I'm encountering an issue while constructing a search field to filter the rows of my table. The problem lies in the fact that the "value" in my pipe is undefined.
Below is the code snippet:
Pipe:
@Pipe({
name: 'filter',
pure: false
})
export class SearchPipe implements PipeTransform {
transform(value, searchinput) {
if (!searchinput[0]) {
return value;
} else if (value) {
return value.filter(item => {
for (let key in item) {
if ((typeof item[key] === 'string' || item[key] instanceof String) &&
(item[key].indexof(searchinput[0]) !== -1)) {
return true;
}
}
});
}
}
Component:
constructor(private _serverService: ServerService, private _router: Router) { }
errorMessage: string;
public servers: Server[];
isLoading = true;
selectedServer: Server;
ngOnInit() {
this.getServers('qa');
}
reloadServers(env) {
this.servers = null;
this.getServers(env);
}
getServers(env?) {
this._serverService.getServers(env)
.subscribe(
value => {
this.servers = value;
this.isLoading = false;
},
error => this.errorMessage = <any>error);
}
All data is correctly filled in my template, however the issue arises when attempting to perform a search. Upon debugging, I observed that the value parameter in my pipe is undefined.
Here is the template:
<input id="searchinput" class="form-control" type="text" placeholder="Search..." [(ngModel)]="searchinput" />
<div id="searchlist" class="list-group">
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th>Hostname</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#server of servers | filter: searchinput">
<td>{{server.MachineNameAlias}}</td>
</tr>
</tbody>
</table>
</div>
Furthermore, here is the error message:
EXCEPTION: TypeError: item[key].indexof is not a function in [servers | filter: searchinput in MainServerPage@35:40]