ngfor in ngfor angularfire2 angular5

Question

Before I begin, I need to stress that I am new to both angular and angularfire (constantly learning) -

My firebase database looks like this:

I can access the order details and bind them in the html, but I am not entirely sure how to convert the Items into an iterable array that I can then use a second ngfor.

My html file looks something like:

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

My constructor in .ts file looks something like:

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

I have looked at others' questions and answers such as here: AngularFire2 nested *ngFor Array within Array... but Firebase doesn't have arrays...?

but I haven't got a clue what the solution would look like for me as I already am using .map() to return the key of the orders. I user order.key as an input to a method that updates the order status, so I would need to this work as is.

I know I have to do something to the portion of my .ts code that I have pasted here but not sure where to begin.

As much as I would like a copy paste solution I would very much appreciate an explanation as to why a proposed solution would work, more so that I can learn the why rather than the what.

I am using AngularFire 2.3.0 and Angular 5.0.0

Asim · Accepted Answer · 2017-11-16 20:26:00Z

2

I have a solution but may not be the best or most efficient.

I added the following to my .ts file

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

and changed the item of order.Items in my .html to:

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

answered Nov 16, 2017 at 20:26

Asim

414 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ngfor in ngfor angularfire2 angular5

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related