Discussion :

[paintbox]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[paintbox]

Problème résolu. Ayant repris l'exemple tel quel, la recherche se fait aussi sur le champ size.
Je n'ai pas ce champ dans mon objet.
Sinon fonctionne parfaitement.

Merci