2016-07-12 74 views
1

我從後端(api)獲取json數據。我想用ngFor顯示這個。我收到了如下錯誤消息:「無法從控制檯找到不同的支持對象'[object Object]'」如何以角度顯示嵌套的對象和或數組2

後來我嘗試這樣做:

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

,然後在我的觀點:

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

這個時候,我沒有得到一個錯誤,但有一種{{detail.creator.email}}

沒有顯示值來自後臺的數據

{ 
     "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" 
    } 

在此先感謝

+0

這將不是這樣的工作。閱讀管道的代碼 - 你現在有一個數組中的鍵/值對象。檢查此plunker:http://plnkr.co/edit/wuVNDpVErNNiXlAn8GJk?p=preview – rinukkusu

+0

感謝@rinukkusu它適用於我,但有沒有一種方法來值子陣 – adongo

+0

不與'* ngFor'。沒有它,你可以使用'{{getEventDetails.creator.email}}'。 – rinukkusu

回答

4

你可能只是想做到這一點:

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

而對於數組:

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

它工作。非常感謝@rinukkusu –