Question

我已经创建了一个用于对表列数据进行排序的自定义管道，并且我希望在Angular 4中为每个单独的列单击图标时动态调用它？有没有办法做到这一点？对此部分的任何帮助表示赞赏。

代码如下：

import { Pipe, PipeTransform } from "@angular/core";
import { Opportunity } from "../models/Opportunity";

@Pipe({
    name: "orderBy",
    pure: false
})

export class OrderByPipe implements PipeTransform {
    /**
     * Method to sort data and return sorted data
     * 
     * @param records 
     * @param args 
     */
    transform(records: Array<any>, args?: any): any {
        return records.sort(function (a, b) {
            if (a[args.property] < b[args.property]) {
                return -1 * args.order;
            }
            else if (a[args.property] > b[args.property]) {
                return 1 * args.order;
            }
            else {
                return 0;
            }
        });
    }
}

Answer 1

您可以在点击事件中调用您的管道：

import { SortPipe } from '@angular/common';
 ...
constructor(private sortPipe: SortPipe ) {}
...
sort() {
  this.dataArray= this.sortPipe.transform(this.dataArray);
 }

Angular 4，自定义管道，用于多列

1 个答案: