javascript - Hur man loopar över objektets egenskaper med ngFor i Angular

det här inlägget handlar om ett intressant problem jag hittade på jobbet.

Om du inte vet det ännu. Jag pratar om Angular 2+

Problemet

Så du vill visa markeringen för en lista, värdena för denna lista kommer från backenden och av någon anledning får du istället för en gammal god array av objekt något som detta.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

Sedan försöker du använda *ngFor men ett vilt felmeddelande dyker upp:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Du kanske fixar det i bakänden så att du får en array av objekt, men ingen har tid för det. Oroa dig inte, jag har oss.

Svar #1

I Angular 6.1 introducerades KeyValuePipe som gör att du kan iterera över objektets egenskaper:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Dokumentation: https://angular.io/api/common/KeyValuePipe

Svar #2

Jag vet inte om detta är säkert, men för dessa enkla fall tycker jag inte om pip-lösningen, så jag brukar använda:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

och i kontrollern:

objectKeys(obj) {
    return Object.keys(obj);
}

Detta är ett ganska vanligt fall, jag förstår inte varför det inte finns en standardimplementation för detta som i Angular.js 1.x

Svar #3

En bättre lösning skulle vara att använda ett rör som detta:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

Sedan i din mall:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

Svar #4

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

Om du har fler egenskaper i objektet kan du använda på det här sättet.

Relaterade artiklar