Estoy intentando hacer un filtro personalizado para obtener los nombres de un listado, a través de un input busco el nombre que quiera. La conexión entre el input y la lista está hecha por medio de un ngModel.
El problema que se me presenta es cuando realizo una búsqueda y me aparece el siguiente error en la consola:
Teniendo en cuenta la imagen, no reconoce toLowerCase como una función.
users.component.html
<div *ngIf="users" class="container size-l">
<div class="row margin-20">
<div class="col">
<div class="input-group mb-3">
<input #userName class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-success" (click)="add(userName.value); userName.value=''">Agregar</button>
</div>
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<input [(ngModel)]="searchText" placeholder="Buscar usuario" class="form-control text-center">
</div>
</div>
</div>
<div *ngIf="users" class="center margin-20">
<div class="size-l text-center">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | filter : searchText : 'name'">
<th><a routerLink="/posts/{{ user.id }}">{{ user.id }}</a></th>
<td>{{ user.name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) {
return [];
}
if (!searchText) {
return items;
}
searchText = searchText.toLowerCase();
return items.filter( it => {
return it.toLowerCase().includes(searchText);
});
}
}