wake-up-neo.com

Wie man Objekteigenschaften mit ngFor in Angular durchläuft

in diesem Beitrag geht es um ein interessantes Problem, das ich bei der Arbeit gefunden habe.

Wenn Sie es noch nicht wissen Ich spreche von Angular 2+

Das Problem

Wenn Sie also das Markup für eine Liste anzeigen möchten, stammen die Werte für diese Liste vom Backend und aus irgendeinem Grund erhalten Sie anstelle eines guten alten Arrays von Objekten so etwas.

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

Sie versuchen dann, * ngFor zu verwenden, aber eine wilde Fehlermeldung wird angezeigt:

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

Sie könnten es im Backend reparieren, so dass Sie ein Array von Objekten erhalten, aber es ist keine Zeit dafür. Mach dir keine Sorgen, Kind, ich habe uns.

17
Jaime Rios

In Angular 6.1 wurde KeyValuePipe eingeführt, mit dem Sie Objekteigenschaften iterieren können:

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

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

39
danday74

Ich weiß nicht, ob dies sicher ist, aber für diese einfachen Fälle mag ich die Rohrlösung nicht. Daher verwende ich normalerweise:

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

und im Controller:

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

Dies ist ein recht häufiger Fall. Ich verstehe nicht, warum es keine Standardimplementierung wie in Angular.js 1.x gibt

14
m__

Eine bessere Lösung wäre die Verwendung einer Leitung wie dieser:

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

Dann in deiner Vorlage:

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

Die Lösung

In einer perfekten Welt würden Sie eine Reihe von Objekten erhalten, da die Welt nicht immer perfekt ist. Sie möchten alle diese Objekte in einem Array speichern. Hier ist eine zu vereinfachte Lösung in einfachem altem JavaScript.

Schritt 1. Holen Sie sich alle Objektschlüssel. mit Object.keys. Diese Methode gibt ein Array der eigenen Aufzählungsmerkmale eines Objekts zurück.

Schritt 2. Erstellen Sie ein leeres Array. Hier werden alle Eigenschaften leben, da Ihre neue ngFor-Schleife auf dieses Array zeigt. Wir müssen sie alle fangen.

Schritt 3. Iterate wirft alle Tasten und drückt jede in das erstellte Array.

So sieht das im Code aus.

// Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.Push(evilResponseProps[prop]);
}

Dann können Sie die goodResponse der Klasseneigenschaft zuweisen, die Sie zuerst durchlaufen wollten.

Das war's Leute.

1
Jaime Rios
    <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>

Wenn Sie mehr Eigenschaften im Objekt haben, können Sie diese wie folgt verwenden.

1
ChamodyaDias