当我尝试迭代我的数据库时,我遇到了一些错误,我尝试了几个答案,但无济于事。下面是我的
订单details.component.html
<header class="masthead h-75 text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="home-info">
<h1 class="cover-heading">Your Order</h1>
</div>
</div>
</header>
<hr class="hidden-md-down">
<div class="container" *ngFor="let item of items">
<div class="row">
<div class="col-12">
<table class="table table-xs">
<tr>
<th></th>
<th>Description</th>
<th class="text-center">Amount</th>
<th class="text-right">Price</th>
<th class="text-right">Total</th>
</tr>
<tr class="item-row">
<td> <img [src]=item.product.imageUrl class="thumbnail img-fluid"></td>
<td>
<p> <strong>{{ item.product.title }}</strong></p>
</td>
<td class="text-right" title="Amount">{{ item.quantity}} </td>
<td class="text-right" title="Price">{{ item.product.price | currency:'NGN':true }}</td>
<td class="text-right" title="Total">{{ item.totalPrice | currency:'NGN':true }}</td>
</tr>
</table>
</div>
</div>
</div>
我的订单 - details.component.ts
import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {AuthService} from '../auth.service';
import {OrderService} from '../order.service';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-order-details',
templateUrl: './order-details.component.html',
styleUrls: ['./order-details.component.css']
})
export class OrderDetailsComponent implements OnInit {
items = {};
id;
constructor( private db: AngularFireDatabase,
public orderService: OrderService,
private auth: AuthService,
private route: ActivatedRoute) {
this.id = this.route.snapshot.paramMap.get('id');
}
ngOnInit() {
this.items = this.orderService.getOrdersByOrderId(this.id)
.subscribe(items => {
this.items = items;
console.log(this.items);
});
}
// getOrdersByOrderId() from my ORDER.SERVICE.TS
getOrdersByOrderId(orderId) {
if (!this.OrdersByOrderId$) {
this.OrdersByOrderId$ = this.db.list('/orders/' + orderId + '/items');
}
return this.OrdersByOrderId$;
}
}
我从JAVASCRIPT BROWSER控制台获得的错误。
找不到'对象'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。在NgForOf.ngOnChanges(common.es5.js:1734)
下面的图像是我的数据库来自FIREBASE
只需更改ngOnInit()内的订阅,即可分配订阅,然后将项目分配回项目。
ngOnInit() {
this.orderService.getOrdersByOrderId(this.id)
.subscribe(items => {
this.items = items;
console.log(this.items);
});
}
//我已经删除了这个this.items =