小编mar*_*o89的帖子

我需要实现无限滚动，因为我的后端响应仅限于 100 个项目。因此，在第一页尝试中，我从后端收到 100 个项目。每次滚动到页面末尾时，我都需要调用另外 100 个项目的端点。

在我的子组件 ( BpHistoryListInfiniteComponent) 中，我设置了data-load用于在 100. 元素进入视图时进行跟踪的属性。然后IntersectionObserver在Subject( pageByScroll$)中设置data-load属性的值。我pageByScroll$需要从 0 开始（对于第一页尝试），并且我使用它distinct()是因为我需要distinct已经加载的项目，然后将该值发送到我的父组件。

但是在父组件中使用过滤器之一后，我需要将index值重置为 0 并将其和过滤器值发送到后端（并且仅接收 100 个项目），然后如果用户滚动到底部，我需要index再次从 0 增加我的值，但distinct()不是请允许我这样做。

我需要以某种方式重置不同的值。

//子组件的html部分

<div #infiniteScrollMadness class="column">
  <div *ngFor="let item of history; let i = index" class="list" [attr.data-load]="(i + 1) % 100 == 0 ? (i + 1) : null">
    <span>{{ item.id }}</span>
    <span>{{ item.name }}</span>
  </div>
</div>

子组件的 .ts 部分 …