迭代angular 4 firebase数据库中的对象数组

时间:2017-12-17 16:02:41

标签: javascript angular firebase firebase-realtime-database

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

order-details.component.html



int findSmallestChildIndex(array[], n, k, d) {
    firstChildIndex = k*d + 1;
    if(firstChildIndex >= n){
        return -1; //the element is a leaf
    }
    lastChildIndex = k*d + d;
    if(lastChildIndex > n) {
        lastChildIndex = n;
    }
    smallestChildIndex = firstChildIndex;
    for(int i=firstChildIndex; i < lastChildIndex; i++)
    {
        if(array[i] < array[smallestChildIndex]) {
            smallestChildIndex = i;
        }
    }
    return smallestChildIndex;
}
&#13;
&#13;
&#13;

我的订单 - details.component.ts

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

错误我从我的JAVASCRIPT BROWSER控制台中获取。

  

找不到不同的支持对象&#39; [object Object]&#39;类型   &#39;对象&#39 ;. NgFor仅支持绑定到诸如Arrays之类的Iterables。在   NgForOf.ngOnChanges(common.es5.js:1734)

以下图片是我的数据库来自FIREBASE

Database Tree

1 个答案:

答案 0 :(得分:1)

只需在ngOnInit()内更改您的订阅,即可分配订阅,然后将项目分配回项目。

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

//我已删除此this.items =