В вашем случае 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)
}
}
Как-то так.