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