Angular 7. Почему ngFor выводит элементы объекта в рандомном порядке?

Question

Имеем объект, который приходит от бэкенда: https://i.stack.imgur.com/0VbUb.png

В шаблоне компонента в цикле перебраю элементы данного объекта:

<ng-container *ngFor="let arAccessory of arAperture.value.accessories | keyvalue">
    {{arAccessory.key.name}}
</ng-container>

Результат странный: name выводятся https://i.stack.imgur.com/0U3Dy.png, но отсортированы они совсем не так, как на первом скриншоте.

Поясните, что именно я себе неверно представляю?

Answer 1

В вашем случае accessories - это объект. JS не гарантирует что поля объекта выведутся именно в том порядке, в котором они представлены на первой картинке. Обход полей объекта в нужном порядке - это в принципе сложная и запутанная тема. Лучше на это не рассчитывать во время разработки: всё сломается неожиданно и практически гарантированно. Для обхода коллекции в нужном порядке разумнее пользоваться массивами. Если accessories будет массивом, то проблемы порядка обхода данных не возникнет. Возникнет проблема обращения к элементам массива.

Я вижу что на картинке у элементов массива есть поле sorting. Я бы использовал его на вашем месте для того чтоб отсортировать всё как нужно.

Типа

<ng-container *ngFor="let arAccessory of arAperture.value.accessories | keyvalue | sortAccessories">
    {{arAccessory.key.name}}
</ng-container>

Ну и сам sortAccessories:

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

@Pipe({name: 'sortAccessories'})
export class SortAccessoriesPipe implements PipeTransform {
    transform(accessories: any[]): any[] {
        return accessories.sort((a, b) => a.value.sorting - b.value.sorting)
    }
}

Как-то так.

БЛОГ НА HUSL

Angular 7. Почему ngFor выводит элементы объекта в рандомном порядке?

Ответы (1 шт):