свойства сортировки трубы углового значения ключа / итерация в порядке - PullRequest
Новая
       7

свойства сортировки трубы углового значения ключа / итерация в порядке

0 голосов
/ 13 октября 2018

При использовании Angular keyvalue pipe для итерации по свойствам объекта следующим образом: 

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Возникла проблема, когда свойства не итерировались в ожидаемом порядке.И этот комментарий предполагает, что я не единственный, кто сталкивался с этой проблемой:

Как перебрать свойства объекта с помощью ngFor в Angular

Может кто-нибудь посоветовать, что определяетпорядок итерации при использовании канала значения ключа пожалуйста и как форсировать конкретный порядок итерации?Мой идеальный порядок итераций - это порядок добавления свойств.

Спасибо

Ответы [ 4 ]

0 голосов
/ 12 июля 2019

Чтобы сохранить порядок объектов, вы можете использовать 

keepOrder = (a, b) => {
    return a;
}

Допустим, у вас есть 

wbs = {
"z": 123,
"y": 456,
"x": 789,
"w": 0#*
}

Если вы используете значение ключа, вы получаете алфавитный порядок по ключу 

w 0#*
x 789
y 456
z 123

применение: keepOrder вы сохраняете порядок объектов 

<ion-item *ngFor="let w of wbs | keyvalue: keepOrder">
    <ion-label>{{ w.key }}</ion-label>
    <ion-label>{{ w.value }}</ion-label>
</ion-item>
0 голосов
/ 13 октября 2018

Согласно документации Angular , труба keyvalue сортирует элементы по порядку key по умолчанию.Вы можете предоставить функцию сравнения для изменения порядка сортировки, но она учитывает только свойства key и value, а не порядок ввода.

Например, следующие функции сравнения сортируют элементы по возрастанию значенияпорядок, и в обратном порядке ключей, соответственно: 

valueAscOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
  return a.value.localeCompare(b.value);
}

keyDescOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
  return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
}

применительно к keyvalue трубе: 

<div *ngFor="let item of object | keyvalue: valueAscOrder">
  {{item.key}} : {{item.value}}
</div>

<div *ngFor="let item of object | keyvalue: keyDescOrder">
  {{item.key}} : {{item.value}}
</div>

См. этот стекаблиц для демонстрации.

0 голосов
/ 04 февраля 2019

Это то же самое, что и принятый ответ, но у него более сложный объект, поэтому он может кому-нибудь помочь. Как отсортировать по настраиваемому полю индекса и использовать keyval pipe.

В угловом компоненте: 

myObject = {
    "key1": { val:"whateverVal1", code:"whateverCode1", index: 1},
    "key2": { val:"whateverVal2", code:"whateverCode2", index: 0},
    "key3": { val:"whateverVal3", code:"whateverCode3", index: 2}
}

Функция сортировки в компоненте: 

indexOrderAsc = (akv: KeyValue<string, any>, bkv: KeyValue<string, any>): number => {
        const a = akv.value.index;
        const b = bkv.value.index;

        return a > b ? 1 : (b > a ? -1 : 0);
    };

в шаблоне: 

<div *ngFor="let x of myObject | keyvalue:indexOrderAsc">
    ...
</div>
0 голосов
/ 13 октября 2018

Да, свойства Object повторяются случайным образом, поскольку они не сохраняются в памяти как array.Однако вы можете сортировать по свойствам.

Если вы хотите выполнить итерацию по позиции вставки, вам нужно создать одно дополнительное свойство, например index, установить timestamp и отсортировать по index.

Ниже приведен каналможно использовать для управления сортировкой и итерацией

Труба 

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'values'})
export class ValuesPipe implements PipeTransform {
    transform(value: any, args?: any[]): Object[] {
        let keyArr: any[] = Object.keys(value),
            dataArr = [],
            keyName = args[0];

        keyArr.forEach((key: any) => {
            value[key][keyName] = key;
            dataArr.push(value[key])
        });

        if(args[1]) {
            dataArr.sort((a: Object, b: Object): number => {
                return a[keyName] > b[keyName] ? 1 : -1;
            });
        }

        return dataArr;
    }
}

Использование 

<div *ngFor='#item in object | values:"keyName":true'>...</div>
...