* ngFor不会循环所有项目

Question

我正在尝试使用Firebase数据库构建角度项目。但问题是NgFor仅打印html中3个元素数组中的第一个元素。

我具有以下数据库结构：

首页ts：

ordersstatus:  AngularFireList<any>;
this.af.list("/orders").valueChanges().subscribe((res:any)=>{
  this.ordersstatus = res
})

HTML：

    <div class="card-body text-center" *ngFor="let cat of ordersstatus; let i=index">

            <tbody *ngFor="let item of cat   | keyvalue">
                <tr>
                  <td>#{{item.value.newproduct[i].item.itemId}}</td>
                  <td>{{item.value.newproduct[i].item.title}}</td>
                  <td><span>{{item.value.status}}</span></td>
                  <td>
                    <div>{{item.value.Tot}}</div>
                  </td>

                </tr>
            </tbody>

    </div>

任何想法吗？

Answer 1

我假设您试图从数组ordersstatus中仅获取第一项。可能这就是您要寻找的]

// Variable on your component
countOfStatusesToDisplay = 1;

HTML模板上的代码。签出slice:0:countOfStatusesToDisplay

<div class="card-body text-center" *ngFor="let cat of ordersstatus | slice:0:countOfStatusesToDisplay; let i=index">
    <tbody *ngFor="let item of cat | keyvalue">
        <tr>
            <td>#{{item.value.newproduct[i].item.itemId}}</td>
            <td>{{item.value.newproduct[i].item.title}}</td>
            <td><span>{{item.value.status}}</span></td>
            <td><div>{{item.value.Tot}}</div></td>
        </tr>
    </tbody>
</div>

Answer 2

在您的ts文件上

ordersstatus:  AngularFireList<any>;
  this.af.list("/orders").valueChanges().subscribe((res:any)=>{
  this.ordersstatus = res.newproduct
 })

HTML

        <tbody *ngFor="let item of ordersstatus | keyvalue">
            <tr>
              <td>{{item.itemId}}</td>
              <td>{{item.title}}</td>
            </tr>
        </tbody>

</div>