U pravilu, kada se žele prikazati neki podaci koristeći *ngFor potrebno je da ti podaci budu u obliku niza (array).
1 2 3 |
export class AppComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; } |
1 2 3 4 5 |
<ul> <li *ngFor="let hero of heroes"> {{ hero }} </li> </ul> |
U ovom bi slučaju rješenje izgledalo ovako:
- Windstorm
- Bombasto
- Magneta
- Tornado
No međutim, ako ti podaci budu u obliku objekta doći će do sljedeće greške (error):
NgFor only supports binding to Iterables such as Arrays
Kako bi se to riješilo Angular 6.1 predstavlja KeyValuePipe.
U tom slučaju sljedeći objekt
1 2 3 4 5 6 7 8 9 |
constructor(){ this.hero = { name: 'Windstorm'. type: 'hero', rating: 10 } } |
Mogu prikazati na ovaj način
1 2 3 4 5 |
<ul> <li *ngFor="let he of hero | keyvalue"> {{ he.key}} - {{ he.value }} </li> </ul> |
Što na kraju izgleda ovako
- name – Windstorm
- type – hero
- rating – 10
Ako se keyvalue pipe pokuša koristiti u nekoj od starijih verzija Angulara doći će do greške što znači da je potrebno nadograditi verziju Angulara na 6.1
The pipe ‘keyvalue’ could not be found
*Naslovna slika preuzeta sa https://orlyapps.de/blog/mobile/einfuhrung-der-neuen-keyvaluepipe-in-angular-61