EinfĂŒhrung der neuen KeyValuePipe in Angular 6.1

EinfĂŒhrung der neuen KeyValuePipe in Angular 6.1

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

Mehr Informationen zu Mobile App Entwicklung

Einheitliche Codebasis und plattformĂŒbergreifende Entwicklung, das gehört fĂŒr Orlyapps einfach zusammen. Denn genau das macht Ihre App flexibel und pflegeleicht, egal fĂŒr welches EndgerĂ€t. Oder gleich mehrere.

Beitrag Teilen