Me enfrento a un problema cuando quiero ordenar una matriz de objetos que también tienen objetos dentro, estoy usando [ngx-order-pipe]. Estoy usando Angular 8. Creo que el problema es querer ordenar una matriz de objetos y acceder a otros objetos para poder ordenar según las claves
El componente.html
<table> <thead> <tr> <th></th> <th class="sortable"> <span class="sort" (click)="sort('coln1')"> <img src="{{ROOT}}/assets/arrow_off.png"/> </span> <span style="margin-left: 2%;">Coln1</span> </th> ... <th> </th> </tr> </thead> <tbody> <tr *ngFor="let element of supplies | orderBy: orderHeader: false" > <td style="width:1%"> <input name="supplyId" type="hidden" value="2"> </td> <td>{{(element.coln1 != null)?element.coln1 : element.supply.coln1}}</td> <td>{{element.supply.coln2}}</td> <td>{{element.supply.coln3 }}</td> <td>{{element.coln4 != null ? element.coln4 : 1}}</td> <td style="width: 1%;"></td> </tr> </tbody> </table>componente.ts
export class TableComponent implements OnInit { @Input() suministros: any = []; @Output() clickEvent = new EventEmitter(); orderHeader: String = ""; reverse = true; constructor(private orderPipe: OrderPipe) { this.ROOT = env.root; } ngOnInit() {} sort(headerName: String): void { this.reverse = !this.reverse; this.orderHeader = headerName; //this.suministros = this.orderPipe.transform(this.suministros, this.reverse); } }Y arroja este error:
compiler.js:2420 Uncaught Error: Template parse errors: The pipe 'orderBy' could not be found (</thead> <tbody> <tr *ngFor="let ele[ERROR ->]ment of supplies | orderBy: orderHeader: false")Importe OrderModule en el módulo donde se declara TableComponent .
Digamos que su TableComponent está declarado en AppModule , así que agregue OrderModule en la matriz de imports como
import { OrderModule } from 'ngx-order-pipe'; @NgModule({ imports: [BrowserModule, OrderModule], declarations: [AppComponent, TableComponent], bootstrap: [AppComponent] }) export class AppModule {}