*ngFor 没有循环所有项目答案

【问题标题】：*ngFor is not looping all items*ngFor 没有循环所有项目
【发布时间】：2020-07-22 22:18:45
【问题描述】：

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

我有以下数据库结构：

首页 :

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>

有什么想法吗？

【问题讨论】：

你的 ngFor 循环一个 cat 数组！但我在你的代码中没有看到这个 cat 数组。可以发一下吗？
*ngFor="let cat of ordersstatus; let i=index" 然后*ngFor="let item of cat | keyvalue" 主数组是ordersstatus

标签： angular firebase ngfor

【解决方案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>

【讨论】：

不，ngfor 只显示数组的第一项，我想显示所有项数组。检查这张图片。 i.ibb.co/XzXG1b4/Capture.png 。他只显示第一个数组而不是全部

【解决方案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>

【讨论】：

【解决方案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 链接：https://stackblitz.com/edit/angular-z6twbw?file=src%2Fapp%2Fapp.component.html

【讨论】：