web-dev-qa-db-fra.com

Plusieurs tubes simultanément dans Angular 2

Je travaille sur un projet Angular 2.

J'ai une table avec plusieurs colonnes. Chaque colonne a une logique de tri différente (nombre, string.lowercase, amountValue en% et INR). Les lignes sont triées sur la base de la logique de tri de cette colonne. Pour y parvenir, j'utilise un tube personnalisé nommé sortTable avec quelques arguments.

En même temps, il y a un champ de saisie en haut qui se lie à la variable searchTerm. Pour filtrer les données avec searchTerm, j'utilise un autre canal personnalisé nommé sortTableRow.

Bien qu'il soit très compliqué, un extrait très simplifié peut être:

<input type="search" [(ngModel)]="searchTerm"/>

<table>
  <thead>
    <tr class="sortable-header">
        <th data-key="status" data-dt="boolean">Status</th>
        <th data-key="name" data-dt="string">Name</th>
        <th data-key="code" data-dt="string">Code</th>
        <th data-key="amountValue" data-dt="amount">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows | sortTable: sortType : {'key': key, 'dt': dt} | searchTableRow : searchTerm : ['name']">
        <td> {{row.status}} </td>
        <td> {{row.name}} </a> </td>
        <td> {{row.code}} </td> 
        <td> {{row.amountValue}} </td>
    </tr>
  </tbody>
</table>

Les deux tuyaux fonctionnent bien individuellement. Lorsque je clique sur l'en-tête de colonne, la clé et le dt (dataType) sont modifiés sur un gestionnaire d'événements de clic et les lignes sont triées en conséquence. Lorsque je recherche un terme, les résultats sont filtrés et je vois la sortie souhaitée.

Mais lorsque j'essaie de trier les RÉSULTATS FILTRÉS (par searchTerm), rien ne se passe. Je pense que dans ce cas, deux tuyaux ne fonctionnent pas simultanément. Je ne veux retirer aucun de ces tuyaux.

angularsortingpipes-filters
5
Anonym

hm ... très étrange. peut être cette aide

<tr *ngFor="let row of (rows | sortTable: sortType : {'key': key, 'dt': dt}) | searchTableRow : searchTerm : ['name']">

sinon essayez de définir console.log dans chaque pipe et regardez ce qu'ils retournent

16
dimson d

Vous pouvez appliquer le tuyau à l'aide du signe de tuyau. comme

<div class="checkbox" *ngFor="let value of brand | filter: {name: searchbrand} | itemdisplayno: displayitems; let i = index">

ici j'utilise deux tuyaux. l'un est le filtre calles avec la valeur de passage le second est itemdisplayno. Fondamentalement, appliquez d'abord le filtre avec la valeur de passage, puis exécutez l'itemdisplayno.

1
vishal dobariya

Cela se produit car vous triez d'abord la liste, puis appliquez le filtrage. Pour le corriger, déplacez simplement le tuyau de filtre avant de trier le tuyau dans votre code html.

`<tr *ngFor="let row of (rows | searchTableRow : searchTerm : ['name']) | sortTable: sortType : {'key': key, 'dt': dt}">`
0
Ramin Ar