2017-11-16 26 views
0

私が始める前に、私は、角度とangularfire(絶えず学習)の両方に新しいだということを強調する必要がある -ngforでngfor angularfire2 angular5

マイfirebaseデータベースは次のようになります。

enter image description here

注文の詳細にアクセスしてhtmlでバインドすることはできますが、Itemをiterable配列に変換して2番目のngforを使用する方法を完全にはわかりません。

私のhtmlファイルには、次のようになります。

 <ng-container *ngFor="let order of orders$ | async "> 
     <ng-container *ngFor="let item of order.Items"> 
     <ng-container *ngIf="order['Order Status'] == 0 "> 

     ... Display stuff using {{ item.Item }} {{ item.Quantity }} 

.TSファイルでの私のコンストラクタが見えるようなもの:私は、このようなここのように他人の質問と回答を見てきました

constructor(afDb: AngularFireDatabase) { 

    this.orders$ = afDb.list<any>('data/shop', ref => ref.orderByChild('ETA')).snapshotChanges().map(
    changes => { 
     return changes.map(
     c => ({ key: c.payload.key, ...c.payload.val() }) 
    ); 
    } 
); 
} 

AngularFire2 nested *ngFor Array within Array... but Firebase doesn't have arrays...?

しかし、私はすでに指紋のキーを返すために.map()を使っているので、解決策が私のためにどのように見えるか分からない。私は注文ステータスを更新するメソッドへの入力としてユーザーorder.keyを使用しているので、そのままこの作業を行う必要があります。

私がここに貼り付けた.tsコードの部分に何かをしなければならないことはわかっていますが、どこから始めるべきかわかりません。

コピーペーストソリューションと同じくらい、提案されたソリューションがなぜ機能するのかについての説明を非常に感謝しています。

私は解決策を持っていますが、最良または最も効率的ではないかもしれないAngularFire 2.3.0および5.0.0

答えて

0

角度を使用しています。

私は.TSに以下を追加しましたが

generateArray(obj){ 
    return Object.keys(obj).map((key)=>{ return obj[key]}); 
    } 

を提出し、私に.htmlの中order.Itemsの項目を変更:

*ngFor="let item of generateArray(order.Items)"