ngFor不会遍历flatMap结果

Question

我试图通过向可观察数组中添加一个新项来创建无限滚动。

onScroll（）在滚动到达某个点时触发，但是结果不允许我将其与* ngFor

一起使用

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

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>