Hey there, I'm encountering an issue that's preventing the route from rendering correctly. I initially thought that unwrapping an observable into an iterable using the async pipe would solve it, but this error indicates otherwise. Sometimes observables can be confusing. What do you think is causing the problem? Should I map this to an array before proceeding?
Error:
MyOrdersComponent.html:5 ERROR Error: Cannot find a differ supporting object 'https://oshop-c71db.firebaseio.com/orders' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngOnChanges (common.js:2570)
at checkAndUpdateDirectiveInline (core.js:12348)
at checkAndUpdateNodeInline (core.js:13876)
at checkAndUpdateNode (core.js:13819)
at debugCheckAndUpdateNode (core.js:14712)
at debugCheckDirectivesFn (core.js:14653)
at Object.eval [as updateDirectives] (MyOrdersComponent.html:5)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638)
at checkAndUpdateView (core.js:13785)
at callViewAction (core.js:14136)
Template:
<h1>My Orders</h1>
<p *ngFor="let order of this.orders$ | async">{{ order.datePlaced | date}}</p>
<p class="card-text">You currently have 0 orders placed.</p>
<table class="table table-hover table-striped ">
<thead>
<tr>
<th>Order Placed</th>
<th>Total</th>
<th>Ship To</th>
<th>Order Number</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let order of this.orders$ | async">
<td></td>
<td>{{ order.datePlaced | date}}</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Component:
import { AuthService } from './../auth.service';
import { OrderService } from './../order.service';
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'app-my-orders',
templateUrl: './my-orders.component.html',
styleUrls: ['./my-orders.component.css']
})
export class MyOrdersComponent {
orders$;
constructor(
private authService: AuthService,
private orderService: OrderService) {
this.orders$ = authService.user$.map(u => orderService.getOrdersByUser(u.uid));
// console.log(this.orders$);
}
}
Order Service:
import { AngularFireDatabase } from 'angularfire2/database-deprecated';
import { Injectable } from '@angular/core';
import { CartService } from './cart.service';
@Injectable()
export class OrderService {
constructor(
private db: AngularFireDatabase,
private cartService: CartService
) { }
async placeOrder(order) {
const result = await this.db.list('/orders').push(order);
this.cartService.clearCart();
return result;
}
getOrders() {
return this.db.list('/orders');
}
// getOrdersByUser(userId: string) {
// return this.db.list('/orders').$ref.orderByChild('userId');
// }
// getOrdersByUser(userId: string) {
// return this.db.list('/orders'.
// ref => ref.orderByChild('userId').equalTo(userId));
// }
getOrdersByUser(userId: string) {
return this.db.list('/orders').$ref.orderByChild('userId').equalTo(userId);
}
}