使用 ngx-order-pipe 对具有嵌套对象的数组进行排序

Question

我想订购一个内部也有对象的对象数组时遇到问题，我正在使用 [ngx-order-pipe]。我正在使用 Angular 8。我认为问题是想要对对象数组进行排序并访问其他对象以便能够根据键进行排序

component.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>&nbsp;</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>

组件.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);
  }
  
}

并抛出此错误：

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")

Answer 1

在声明TableComponent的模块中导入OrderModule。

假设您的TableComponent 在AppModule 中声明，因此在imports 数组中添加OrderModule 为

import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  imports: [BrowserModule, OrderModule],
  declarations: [AppComponent, TableComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}