遍历 Angular 4 firebase 数据库中的对象数组答案

【问题标题】：Iterating through array of objects from your angular 4 firebase database遍历 Angular 4 firebase 数据库中的对象数组
【发布时间】：2017-12-17 16:02:41
【问题描述】：

当我尝试遍历我的数据库时遇到了一些错误，我尝试了几个答案但无济于事。下面是我的

order-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 浏览器控制台得到的错误。

找不到不同类型的支持对象“[object Object]” '目的'。 NgFor 仅支持绑定到 Iterables，例如 Arrays。在 NgForOf.ngOnChanges (common.es5.js:1734)

下图是我来自 FIREBASE 的数据库树

【问题讨论】：

有什么问题？
@Sajeetharan 我已将错误添加到问题中
因为错误表明您正在为 ngFor 提供一个对象，而不是您需要提供一个数组。调试并查看您正在传递的内容
@Sajeetharan 我刚刚尝试将 orderdetails.ts 中的项目实例化为一个空数组，但我仍然遇到同样的错误
能不能发一下json格式的控制台日志

标签： javascript angular firebase firebase-realtime-database

【解决方案1】：

只需在 ngOnInit() 中更改您的订阅，您正在分配订阅，然后将项目分配回项目。

 ngOnInit() {
     this.orderService.getOrdersByOrderId(this.id)
      .subscribe(items => {
        this.items = items;
        console.log(this.items);
      });
  }

// 我已经删除了这个this.items =

【讨论】：