Невозможно отсортировать массив элементов с помощью динамического ключа.

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, я бы хотел отсортировать записи. поэтому я посылаю значение в качестве параметра для метода transform (-). Но записи не сортируются.

Пожалуйста, дайте мне знать, если у вас есть какое-либо решение.

Answer 1

Используйте 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 2

Как упомянуто briosheje , вам нужно использовать item[args] вместо item.args.

Кроме того, при вызове канала вам нужно только передать значение в качестве аргумента, а не массив, содержащий источник и 'Value'.

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

Вот рабочий stackblitz

Answer 3

Предполагая, что фильтр действительно работает (присоединяется к функции и передает правильные параметры), вы просто неправильно обращаетесь к свойству объекта.

Используйте скобочные обозначения для правильной оценки свойства, в противном случае вы получите доступ к буквальному свойству 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.