Einführung der neuen KeyValuePipe in Angular 6.1

Angular Version 6.1 wurde veröffentlicht und wird mit einer ziemlich nützlichen Pipe ausgeliefert: Die KeyValuePipe Pipe.

Die ngFor-Direktive unterstützte bisher keine Iterationen über Objekte oder Maps. Aber es gibt viele Situationen wo genau diese Funktionalität benötigen wird.

Die KeyValuePipe wurde entwickelt, um genau dieses Problem zu lösen. Es wandelt ein Objekt oder eine Map in ein Array von Key-Value Pairs um, so dass wir ngFor darauf verwenden können.

KeyValuePipe mit einem Javascript Object

@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 };}

Das Ergebnis sieht dann so aus:

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

KeyValuePipe mit einer Javascript 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]]);}

Standardmäßig wird das Array nach Schlüsseln sortiert. Hier sind Beispiele für Arrays, die auf der Grundlage der alphanumerischen Standardreihenfolge erstellt wurden:

const input = { b: 1, a: 1 };const output = [{ key: "a", value: 1 }, { key: "b", value: 2 }];

const input = { 2: 1, 1: 1 };const output = [{ key: "1", value: 1 }, { key: "2", value: 2 }];

Aber das kann jederzeit überschrieben werden, indem einen Compare Funktion als zweiter Parameter übergeben wird.

@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) => ...}

Ziemlich Praktisch finden wir! ?

Mehr Infos zum Thema KeyValuePipe gibt es in der offizielle Angular Dokumentation