keyValuePipe

Еще в Angular версии 6.1 был выпущен пайп, который упрощает работу с итерируемыми коллекциями — KeyValuePipe.

KeyValuePipe преобразует объект или карту в массив пар ключ-значение, чтобы мы могли использовать *ngFor для его перебора.

Давайте посмотрим, как мы можем его использовать:

@Component({
  template: `
    <h1>Object</h1>
    <div *ngFor="let row of rows | keyvalue">
      {{ row | json }}
      {{row.key}}: {{row.value}}
    </div>
  `
})
export class AppComponent {
  rows = {
    a: 1,
    b: 2
  }
}

Результат конвертации будет таким:

[
 { "key": "a", "value": 1 }
 { "key": "b", "value": 2 }
]

Рассмотрим вариант использования с Map

@Component({
  template: `
    <h1>Map</h1>
    <div *ngFor="let row of rowsMap | keyvalue">
      {{ row | json }}
      {{row.key}}: {{row.value}}
    </div>
  `
})
export class AppComponent {
  rowsMap = new Map([['a', 1], ['b', 2]]);
}

По умолчанию выходной массив будет упорядочен по ключам (значению Юникода). Вот примеры массивов, созданных на основе алфавитного порядка по умолчанию:

// пример 1
const input = { b: 1, a: 1 };
const output = [ { key: 'a', value: 1 }, { key: 'b', value: 2} ]

// пример 2
const input = { 2: 1, 1: 1 };
const output = [ { key: '1', value: 1 }, { key: '2', value: 2} ];

@Component({
  template: `
    <div *ngFor="let row of rows | keyvalue: compareFn">
      {{ row | json }}
      {{row.key}}: {{row.value}}
    </div>
  `
})
export class AppComponent {
  rows = {
    a: 1,
    b: 2
  }

  compareFn = (a, b) => ...
}
// https://stackblitz.com/edit/keyvaluepipe?file=src%2Fapp%2Fapp.component.ts