Estoy trabajando en un proyecto Angular 2.
Tengo una tabla con varias columnas. Cada columna tiene una lógica diferente para ordenar (número, cadena.minúsculas, cantidadValor en % e INR). Las filas se ordenan según la lógica de ordenación de esa columna. Para lograr esto, estoy usando una canalización personalizada llamada sortTable con pocos argumentos.
Al mismo tiempo, hay un campo de entrada en la parte superior que se vincula a la variable searchTerm. Para filtrar los datos con searchTerm, estoy usando otra tubería personalizada llamada sortTableRow.
Aunque es muy complicado, un fragmento muy simplificado puede ser:
<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>Ambos tubos funcionan bien individualmente. Cuando hago clic en el encabezado de la columna, la clave y el dt (tipo de datos) se cambian en un controlador de eventos de clic y las filas se ordenan en consecuencia. Cuando busco un término, los resultados se filtran y veo el resultado deseado.
Pero cuando trato de ordenar los RESULTADOS FILTRADOS (por término de búsqueda), no pasa nada. Creo que en este caso, dos tuberías no funcionan simultáneamente. No quiero quitar ninguna de estas tuberías.
mmm... muy extraño. puede ser esta ayuda
<tr *ngFor="let row of (rows | sortTable: sortType : {'key': key, 'dt': dt}) | searchTableRow : searchTerm : ['name']">si no, intente configurar console.log en cada tubería y observe lo que devuelven
Puede aplicar la tubería usando el signo de tubería. me gusta
<div class="checkbox" *ngFor="let value of brand | filter: {name: searchbrand} | itemdisplayno: displayitems; let i = index">aquí estoy usando dos tubos. uno es filtro de calles con valor de paso, el segundo es itemdisplayno. Básicamente, primero aplique el filtro con valor de paso y luego ejecute itemdisplayno.
Esto sucede porque primero ordena la lista y luego aplica el filtrado. Para solucionarlo, simplemente mueva la tubería de filtro antes de ordenar la tubería en su código html.
`<tr *ngFor="let row of (rows | searchTableRow : searchTerm : ['name']) | sortTable: sortType : {'key': key, 'dt': dt}">`