Question

我有问题。我正在尝试在Angular项目中实现无限滚动。滚动效果很好，但是我无法将数据绑定到一行中以在网格中显示数据。

这是我的代码：

<cdk-virtual-scroll-viewport *ngIf="!buscar" style="height: 100vh" itemSize="50" >
<ng-container *cdkVirtualFor="let venue of venues">
  <div class=" col-6 col-md-6 col-lg-3 mb-4">
      <div class="card" [routerLink]="['/salas/details/', venue.id]">
        <img class="card-img-top img-fluid venue-img animated fadeIn slow" onError="this.src='../../../assets/img/brand/giramos-logo.gif';" src="{{venue.img}}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">{{venue.nombre}}</h5>
          <p class="card-text">{{venue.ciudad}} / {{venue.distrito}}</p>
        </div>
      </div>
    </div>
</ng-container> </cdk-virtual-scroll-viewport>

如果我尝试将行类放入cdk-virtual-scroll-viewport或ng-container中，则所有崩溃。因此，我没有放行类并且工作正常，但是结果是这样的：

The items are one per row

如果我检查页面并编辑添加行类的HTML，则可以获得所需结果：

The desired effect

如何获得此结果？非常感谢。

Answer 1

在较新版本的angular中，我们使用angular cdk （@ angular / cdk。（v7.0.0-beta.0））找到了很好的解决方案。

https://netbasal.com/a-taste-of-angular-material-virtual-scroll-f173c5c70a1

我认为这可以节省您的时间。

带角度问题的Bootstrap无限滚动

1 个答案: