*ngFor 没有循环所有项目

Question

我正在尝试使用 Firebase 数据库构建 angular 项目。但问题是 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>

Answer 3

将 HTML 模板更新为：

<div class="card-body text-center" *ngFor="let cat of data; let i=index">
  <tbody *ngFor="let item of cat | keyvalue">
    <tr *ngFor="let product of item.value.newproduct">
      <td>#{{product.item.itemId}}</td>
    </tr>
  </tbody>
</div>

Stackblitz link：https://stackblitz.com/edit/angular-z6twbw?file=src%2Fapp%2Fapp.component.html

*ngFor 没有循环所有项目

*ngFor is not looping all items

angular

firebase

ngfor