Quan sát lồng nhau trong Angular2 sử dụng AngularFire2 không hiển thị trong chế độ xem

Question

Tôi đang tạo ứng dụng thử nghiệm (Ionic 2) sử dụng Firebase và AngularFire2 (hiện đang ở dạng alpha). Đối với điều này tôi đang làm theo hướng dẫn này từ Aaron Saunders làm căn cứ:

http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://github.com/aaronksaunders/ionic2-angularfire-sample

Dưới đây là home.ts tôi và home.html tôi.

this.projects = af.list('/items').map((items) => { 
    return items.map(item => { 
     item.meta = af.object(`/item_meta/${item.$key}`) 
     return item 
    }) 
}) 

Bằng cách này làm tổ trở về quan sát bởi AngularFire2 đã được chứng minh trong bài trình bày sau đây: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

Đây là quan điểm của tôi:

<ion-card *ngFor="#item of items | async"> 
    <ion-card-header> 
     {{item.name}} 
    </ion-card-header> 
    <ion-card-content> 
     {{item.description}} 
     <br> 

     {{item.meta.stockPrice | async}} 

    </ion-card-content> 
</ion-card> 

Sự khác biệt chính với ví dụ trong bài thuyết trình tôi tiếp theo là một thực tế rằng tôi đang lồng một 'đối tượng' có thể quan sát bên trong một 'danh sách/mảng' có thể quan sát được. Thay vào đó, họ thêm danh sách trong danh sách. Hậu quả của việc này là tôi đang cố gắng hiển thị {{item.meta.stockPrice}} trong chế độ xem của tôi trực tiếp thay vì làm tổ một ngFor.

Đây là những gì dữ liệu của tôi trông giống như:

{ 
    "items": 
     { 
      "item1":{ 
       "name": "Item 1", 
       "description": "1234" 
      }, 
      "item2":{ 
       "name": "Item 2", 
       "description": "abcd" 
      } 
     } 
    "items_meta"{ 
     "item1":{ 
      "stockPrice": 1234, 
      "moarData": "derp" 
     }, 
     "item2":{ 
      "stockPrice": 386, 
      "moarData": "lolz" 
     } 
    } 
} 

tôi dường như không thể tìm ra lý do tại sao đối tượng không muốn để render. Nếu tôi xuất nó sang JSON, nó cho thấy dữ liệu ở đó. Xin lưu ý rằng tôi mới đến Angular2 và vẫn quấn đầu quanh những thay đổi từ Angular1. Tôi đang làm gì sai?

Edit: Tôi đã cập nhật các thông tin trên và thêm vào cấu trúc dữ liệu của tôi để làm cho nó rõ ràng hơn

Answer 1

Đối với vấn đề cụ thể của bạn ...

{{(item.meta | async)?.stockPrice}} 

sử dụng toán tử elvis (?) để làm bảo hoạt động async hoàn tất và sau đó truy cập giá trị mong muốn

mã nguồn ở đây trong github: https://github.com/aaronksaunders/afwithngcli

-

bạn đã đi trước tôi ... làm việc trên các bài đăng blog mới, nhưng đây là mã

script.html

</ion-card> 
    <ion-card *ngFor="#user of usersWithMessages | async"> 
    <ion-card-header> 
     {{user.displayName}} 
    </ion-card-header> 
    <ion-card-content> 
     {{ (user.messages | async) | json}} 
    </ion-card-content> 
</ion-card> 

script.ts

this.usersWithMessages = this.af.list('/users').map((_users) => { 
    return _users.map((_user) => { 
     _user.messages = this.af.object("/userObjects/public-messages/" +_user.$key) 
     return _user 
    }) 
}) 

dữ liệu

"userObjects" : { 
    "public-messages" : { 
     "8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : { 
     "message-id-0" : { 
      "text" : "a public message" 
     } 
     }, 
     "9c6ea912-ec24-4127-b123-6512ed135f06" : { 
     "-KFCGp5ojo7JSX2myOPE" : { 
      "date" : "1460511658442.75", 
      "text" : "this should be a. public message" 
     }, 
     "-KFCJc4GtEo_PDWi7hru" : { 
      "date" : "1460512391529.69", 
      "text" : "this is a message that should be public" 
     }, 
     "message-id-100" : { 
      "date" : "3243245411111", 
      "text" : "public for the other user" 
     } 
     } 
    } 
    }, 
"users" : { 
    "8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : { 
     "displayName" : "c@mail.com", 
     "provider" : "password" 
    }, 
    "9c6ea912-ec24-4127-b123-6512ed135f06" : { 
     "displayName" : "b@mail.com", 
     "provider" : "password" 
    }, 
    "cdcf32af-a8cd-467d-a04f-dfc223e890d2" : { 
     "avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro", 
     "displayName" : "bryce@mail.com", 
     "provider" : 4 
    } 
    }