Angular ngFor won'；t迭代平面图结果

我试图通过向我的可观察数组添加一个新项目来创建一个无限卷轴

当滚动到达某一点时，会触发onScroll（），但结果不允许我将其与*ngFor一起使用

this.products$ = this.storeService.getAllProducts(this.offset++)
    .pipe(
      flatMap(result => (fixImages(result, 1000000000))),
      tap(r => console.log(r)),
    )
}

HTML:

{{prod.name}
{{prod.year}
REF:{{prod.REF}}
英镑{formatNumber（产品价格[0].金额）|货币：'GBP'：''}

HTML中是否有异步管道？那么只有它才能做到是的，我已经用HTML代码更新了我的问题

<div class="product-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
              <ul class="list-products">
                <li *ngFor="let prod of products$ |async">
                  <!-- product-->
                  <div class="product-item">
                    <a [routerLink]="['/product', prod.id]">
                      <span class="wishlist-like">
                        <span class="icon-heart"></span>
                      </span>
                      <div class="visual">
                        <div class="hold">
                          <img [src]="prod.images[0].url" style="object-fit: fill" alt="image description" />
                        </div>
                      </div>
                      <span class="produst-name">{{ prod.name }}</span>
                      <div class="product-info">
                        <div class="left-col">
                          <span class="year">{{ prod.year }}</span>
                          <span class="code">
                            <ng-container *ngIf="prod.ref">REF: </ng-container>{{prod.ref}}</span>
                        </div>
                        <span class="price">
                          <sup>£</sup>{{ formatNumber(prod.price[0].amount) | currency: 'GBP': '' }}</span>
                      </div>
                    </a>
                  </div>
                </li>