angular
April 6
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