Champ de recherche via pipe
Bonjour,
Sur une page qui affiche une liste d'éléments, j'ai mis un champ de recherche permettant de filtrer cette liste.
Je suis parti d'un exemple que j'ai trouvé ici => https://stackblitz.com/edit/angular-...Fapp.module.ts.
Je l'ai reproduit sur un projet à part et il fonctionne très bien.
J'ai donc essayé de l'appliquer à mon projet et j'ai l'erreur suivante qui s'affiche à la console : TypeError: Cannot read properties of undefined (reading 'toLowerCase').
Visiblement la transformation en minuscule pose problème mais je ne vois pas pourquoi.
Voici le champ de recherche et la façon dont j'applique le filtre sur mes données:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ...
<div class="row">
<div class="offset-10 col-md-2 mt-25">
<input type="search" [(ngModel)]="search">
</div>
</div>
...
<tr *ngFor="let truck of (trucks | filter:search)">
<td>{{truck.name}}</td>
<td>{{truck.commercialMail}}</td>
<td>{{truck.phone}}</td>
<td><button type="button" id="details" class="btn btn-details" (click)="getTruckDetails(truck.id)">Details</button></td>
<td><button type="button" id="update" class="btn btn-update">Update</button></td>
<td><button type="button" id="delete" class="btn btn-danger">Delete</button></td>
</tr> |
Voici le code du filtre (pipe) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any, searchValue: string): any {
if (!searchValue) return value;
return value.filter((v:any) => v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)
}
} |
J'ai essayé de debugger. Je rentre bien dans le filtre dès l'entrée d'une première lettre dans le champ de recherche.
Le paramètre value contient bien mon tableau de données et le paramètre searchValue contient bien la valeur recherchée.
Quelque chose doit m'échapper mais je ne vois pas quoi.
Merci pour votre aide.
