cdk-virtual-scroll-viewport 无法呈现正确数量的项目

如何解决cdk-virtual-scroll-viewport 无法呈现正确数量的项目

我正在为一个虚构的超市（个人学习项目）创建一个 Angular 应用程序，我的数据库中有大约 5000 种产品，我想通过无限滚动加载到我的应用程序中。

width cdk-virtual-scroll 我设法做到了，但我无法正确调整 itemsize 和 maxBuffers/minBuffers，最好的结果是实验性功能 autosize 但结果非常不稳定，我不能依赖它。 .

问题似乎是我正在尝试加载包含 3 或 4 行产品的产品网格（显示 flex），当我滚动时一切正常，然后加载包含 1 个产品的一行，或者2，然后随机弹出其余的产品..这样是不可行的..

有什么帮助吗？我真的很想使用无限滚动而不是分页..

我的组件 html：

'leop'

我的CSS：

  <app-scroll-to-top [@inAnimation] (click)="scrollTop()" *ngIf="scrollPosition"></app-scroll-to-top>
<cdk-virtual-scroll-viewport class="viewport" (scroll)="onScroll($event)" autosize>
 `enter code here` <div #productsContainer class="products-container">
    <div *cdkVirtualFor="let product of productsToShow" class="product-card">
      <div class="img-container">
        <img [src]="product.imagen" [alt]="product.nombre">
        <div class="price-tag">
          <p>{{product.precio}}€</p>
        </div>
        <div [@inAnimation] *ngIf="product.cantidad === 1" class="cantidad-tag">
          <p>{{product.cantidad}} Agregado</p>
        </div>
        <div [@inAnimation] *ngIf="product.cantidad > 1" class="cantidad-tag">
          <p>{{product.cantidad}} Agregados</p>
        </div>
      </div>
      <div class="product-texts">
        <p>{{product.marca}}</p>
        <p>{{product.nombre}}</p>
        <p>{{product.descripcion}} </p>
      </div>
      <button (click)="addProduct(product)" class="mi-boton btn btn-info">Añadir</button>
    </div>
  </div>
</cdk-virtual-scroll-viewport>

我的组件 TS：

cdk-virtual-scroll-viewport.viewport,virtual-scroller{
  height: 60vh;
  width: 100%;
  /* border: 5px solid black */
  scroll-behavior: smooth;
  scrollbar-color: var(--secondary-color) var(--primary-color);
  margin: 1em auto;
}

我的服务可以获取所有 5000 种产品：

 export class ProductsComponent implements OnInit {
  faSearch = faSearch;
  searchText: string;
  category: any;
  productsToShow: Product[];
  productsInList: Product[];
  scrollPosition: number;
  itemsize = 250;
  @ViewChild('productsContainer',{ read: ElementRef }) public panel: ElementRef<any>;
  @ViewChild(CdkvirtualscrollViewport) virtualscroll: CdkvirtualscrollViewport;


  constructor(
    private navbarService: NavbarService,private listasService: ListasService,private productsService: ProductsService
  ) {

    this.productsInList = this.listasService.getNewList();
    this.navbarService.showNavbar(true);

  }

  async ngOnInit() {
    this.category = await this.productsService.getSelectedCategory();
    if (!this.category) {
      this.category = { name: 'todos los productos' }
    }

    this.productsToShow = await this.productsService.getAllProducts();

    this.productsInList.forEach(product => {
      this.productsToShow.find(producto => {
        if (producto.id === product.id) {
          producto.cantidad = product.cantidad
        }
      });
    })
  }

请帮助...