Question

我已经实现了自定义管道以对记录进行如下排序

import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'sortpipe'
    })
    export class SortPipe implements PipeTransform {

      transform(data: any, args?: string): any {
        if (!data) { return; }
        let sortedData = data.sort((item: any, item1: any) => (item.args> item1.args) ? 1 : ((item1.args> item.args) ? -1 : 0));
        return sortedData;
      }

    }

我在html页面中将其应用如下

<ejs-multiselect id='multiselect-checkbox' #checkbox='ngModel' [dataSource]="dropDownList.severity | sortpipe:[dropDownList.severity, 'Value']"........

下面是我来自API的示例数据

[{Key: "8baa71ae-3c14-11e9-8be6-90b11c61d394", Value: "Doors"}
{Key: "e10a4802-3f36-11e9-8d5a-90b11c61d394", Value: "Walls"}
{Key: "194f69a0-39c8-11e9-8be6-90b11c61d394", Value: "Windows"}
{Key: "d0c75562-5c31-11e9-9de4-90b11c61d394", Value: "Ducts"}
{Key: "556fba82-6102-11e9-b459-90b11c61d394", Value: "Air Terminals"}
{Key: "3cbc77b0-62af-11e9-b99a-90b11c61d394", Value: "Areas"}
{Key: "4a0c0156-62af-11e9-b99a-90b11c61d394", Value: "Cable Tray Fittings"}
{Key: "8aff8a34-62af-11e9-b99a-90b11c61d394", Value: "Cable Trays"}
{Key: "4a2afb1e-62b0-11e9-b99a-90b11c61d394", Value: "Casework"}]

基于Value属性，我想对记录进行排序。所以我将Value作为参数发送给transform（-）方法。但是记录没有排序。

请告诉我您是否有解决办法。

Answer 1

假设过滤器确实有效（加入函数并传递正确的参数），则您只是以错误的方式访问对象的属性。

使用方括号符号正确评估属性，否则，您将访问循环项的文字args属性。

let sortedData = data.sort((item: any, item1: any) => (item[args]> item1[args]) ? 1 : ((item1[args]> item[args]) ? -1 : 0));

简而言之：

如果item[args]是item['Value']，

args将得出Value。

item.args代替，总是计算为item['args']，在您的情况下，该值始终为undefined。

Answer 2

使用String#prototype#localeCompare根据字符串的排序顺序对其进行排序。

const data = [{Key: "8baa71ae-3c14-11e9-8be6-90b11c61d394", Value: "Doors"},
{Key: "e10a4802-3f36-11e9-8d5a-90b11c61d394", Value: "Walls"},
{Key: "194f69a0-39c8-11e9-8be6-90b11c61d394", Value: "Windows"},
{Key: "d0c75562-5c31-11e9-9de4-90b11c61d394", Value: "Ducts"},
{Key: "556fba82-6102-11e9-b459-90b11c61d394", Value: "Air Terminals"},
{Key: "3cbc77b0-62af-11e9-b99a-90b11c61d394", Value: "Areas"},
{Key: "4a0c0156-62af-11e9-b99a-90b11c61d394", Value: "Cable Tray Fittings"},
{Key: "8aff8a34-62af-11e9-b99a-90b11c61d394", Value: "Cable Trays"},
{Key: "4a2afb1e-62b0-11e9-b99a-90b11c61d394", Value: "Casework"}];

const res = data.sort((a, b) => a.Value.localeCompare(b.Value));
console.log(res);

将管道修改为：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortpipe'
})
export class SortPipe implements PipeTransform {
  transform(data: any, args?: string): any {
    if (!data) { return; }
    let sortedData = data.sort((a, b) => a.Value.localeCompare(b.Value));
    return sortedData;
  }
}

Answer 3

就像提到的briosheje一样，您需要使用item[args]而不是item.args。

此外，在调用管道时，只需传递“ Value”作为参数，而不是包含源和“ Value”的数组。

<ejs-multiselect id='multiselect-checkbox' 
#checkbox='ngModel' 
[dataSource]="dropDownList.severity | sortpipe:'Value'"

这是工作中的stackblitz

无法使用动态键对项目数组进行排序

3 个答案: