Bonjour à tous,
Je suis entrain de créer une application avec Angular 8 et Firebase.
J'affiche une liste d'item dans une boucle avec une pipe 'keyvalue'. Jusqu'ici ça fonctionne bien.
J'ai crée une fonction de filtrage pour afficher les items correspondants à la valeur saisie dans un input.
J'utilise 'Object.values() dans ma fonction mais ça supprime les 'key' de mes items filtrés et les remplace par des index.
Les 'key' ne correspondent plus aux items
Est-ce que vous auriez une autre méthode pour arriver à conserver les 'key' ?
Sources: https://github.com/Mobize/BlocNote
Le schéma de ma bdd Firebase :
Le code du template :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Recherche..."> <!-- items --> <mat-list-item id="item_list" *ngFor="let item of filteredItems | keyvalue ; let i = index" [class.changeColor]="item.key == selectedValue"> <a (click)="openItem(item, item.key)" *ngIf="item.value.title" matLine><mat-icon [class.yellow]="item.key == selectedValue">code</mat-icon>{{item.value.title}}</a> <button mat-icon-button> <mat-icon id="edit_item_icon" (click)="onEditItem(item)">edit</mat-icon> <mat-icon (click)="openDialog(item.key, item.value.title)">delete_sweep</mat-icon> </button> </mat-list-item>
La fonction filter() :
L' item avant le filtrage :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 filter(query: string) { this.filteredItems = (query) ? Object.values(this.items).filter(p=>p.title.normalize("NFD").replace(/[\u0300-\u036f]/g, "") .toLowerCase().includes(query.toLowerCase())) : this.items; }
Après filtrage :
Merci d'avance pour votre aide!
PS: Pour info l'adresse de l'application (il faut créer un compte) : https://oliviercharpentier.fr/blocnote/
Partager