2016-07-12 10 views
1

Ich bekomme JSON-Daten aus dem Back-End (API). Und ich möchte dies mit ngFor anzeigen. Ich habe eine Fehlermeldung wie: "Kann ein anderes unterstützendes Objekt [Objekt Objekt] '" von der Konsole nicht finden.Wie geschachtelte Objekte und oder Arrays in Winkel 2 angezeigt werden

später habe ich versucht, dies:

@Pipe({ 
    name: 'mapToIterable' 
}) 
export class MapToIterable implements PipeTransform{ 
    transform(map: {}, args: any[] = null): any { 
     if (!map) 
      return null; 
     return Object.keys(map) 
      .map((key) => ({ 'key': key, 'value': map[key] })); 
    } 
} 

und dann meiner Meinung nach:

<li *ngFor="let detail of getEventDetails | mapToIterable"> 
      Creator Email: {{detail.creator.email}} 
    </li> 

diesmal ich nicht einen Fehler hat, aber es gibt keine Anzeigewerte von {{detail.creator.email}}

Daten vom Back-End

{ 
     "banner_image": null, 
     "categories": [], 
     "creator": { 
      "email": "[email protected]", 
      "first_name": "Prince", 
      "gender": true, 
      "id": 15, 
      "last_name": "Odame", 
      "subscribed_categories": [], 
      "watchlist": [] 
     }, 
     "creator_id": 15, 
     "description": "Learn how to install solar panels in 3 days and make real money all your lifetime", 
     "faqs": [], 
     "id": 6, 
     "is_verified": true, 
     "max_tickets_per_user": 1, 
     "shows": [ 
      { 
       "address": "Engineering Auditorium, College of Engineering, KNUST, Kumasi", 
       "city": "Kumasi", 
       "country": "Ghana", 
       "end_time": "2016-08-03T14:30:00+00:00", 
       "event_id": 6, 
       "id": 5, 
       "is_online": false, 
       "start_time": "2016-08-01T08:30:00+00:00", 
       "state": "Ashanti", 
       "ticket_types": [], 
       "venue": "Engineering Auditorium" 
      } 
     ], 
     "tags": [], 
     "title": "Solar Panels Installation Workshop" 
    } 

Vielen Dank im Voraus

+0

Das wird so nicht funktionieren. Lesen Sie den Code der Pipe - Sie haben nun Schlüssel/Wert-Objekte in einem Array. Check this bottom: http://plnkr.co/edit/wuVNDpVErNNiXlAn8GJk?p=preview – rinukkusu

+0

Dank @rinukkusu funktioniert es für mich aber gibt es einen Weg zu Werten der Sub-Arrays – adongo

+0

Nicht mit '* ngFor'. Ohne es können Sie einfach {{getEventDetails.creator.email}} 'verwenden. – rinukkusu

Antwort

4

Sie wollen wahrscheinlich nur, dies zu tun:

<li>Creator Email: {{getEventDetails.creator.email}}</li> 

Und für die Arrays:

<li *ngFor="let show of getEventDetails?.shows"> 
    Show ID: {{show.id}} 
</li> 
+1

Es hat funktioniert. Vielen Dank @rinukkusu –