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 :
Nom : items.PNG
Affichages : 728
Taille : 24,5 Ko

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() :
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;
  }
L' item avant le filtrage :
Nom : original_item.PNG
Affichages : 706
Taille : 5,8 Ko

Après filtrage :
Nom : filtered_item.PNG
Affichages : 702
Taille : 4,4 Ko

Merci d'avance pour votre aide!

PS: Pour info l'adresse de l'application (il faut créer un compte) : https://oliviercharpentier.fr/blocnote/