Angular 4中能否为ngFor设置双索引并限定迭代范围？

嘿，这个需求我之前在项目里也碰到过，刚好可以给你分享下可行的解决方案！其实Angular的*ngFor本身并不支持直接通过双索引范围来迭代，但我们可以换个思路，通过数组切片+滚动监听来完美实现你要的效果，而且完全不会重绘已经创建好的DOM节点，刚好契合你的需求！

核心思路 #

通过维护两个控制变量：startIndex（当前显示范围的起始索引）和pageSize（每次加载的数量，比如你说的10个），然后从原始数组中切片出当前需要显示的子数组，绑定到*ngFor上。滚动到底部时，更新startIndex并追加新的子数组元素，这样已创建的DOM节点会被保留，只新增后面的节点。

具体实现步骤 #

1. 组件里定义变量和逻辑

import { Component } from '@angular/core';

@Component({
  selector: 'app-scroll-list',
  templateUrl: './scroll-list.component.html',
  styleUrls: ['./scroll-list.component.css']
})
export class ScrollListComponent {
  // 你的原始数据数组（假设这里有200个元素）
  items: any[] = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, content: `Item ${i + 1}` }));
  // 每次加载的数量
  pageSize = 10;
  // 当前显示的起始索引
  startIndex = 0;
  // 用于*ngFor绑定的显示数组
  displayedItems: any[] = [];

  ngOnInit() {
    // 初始加载前10个元素
    this.loadInitialItems();
  }

  loadInitialItems() {
    this.displayedItems = this.items.slice(this.startIndex, this.startIndex + this.pageSize);
  }

  // 滚动事件处理函数
  onScroll(event: Event) {
    const scrollContainer = event.target as HTMLElement;
    // 判断是否滚动到容器底部
    const isScrolledToBottom = scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight;
    
    if (isScrolledToBottom) {
      // 计算下一批要加载的起始和结束索引
      const nextStart = this.startIndex + this.pageSize;
      const nextEnd = nextStart + this.pageSize;
      
      // 确保不超过原始数组的长度
      if (nextStart < this.items.length) {
        // 追加新元素到显示数组（这里用扩展运算符，避免替换整个数组导致已创建的DOM节点重绘）
        this.displayedItems = [...this.displayedItems, ...this.items.slice(nextStart, nextEnd)];
        this.startIndex = nextStart;
      }
    }
  }
}

2. 模板中的实现

给滚动容器添加滚动事件监听，然后用*ngFor遍历displayedItems：

<!-- 滚动容器，需要设置固定高度和overflow-y: auto -->
<div class="scroll-container" (scroll)="onScroll($event)">
  <div *ngFor="let item of displayedItems" class="list-item">
    {{ item.id }} - {{ item.content }}
  </div>
</div>

3. 样式设置（确保容器可滚动）

.scroll-container {
  height: 400px; /* 根据需求设置固定高度 */
  overflow-y: auto;
  border: 1px solid #eee;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
}

关键细节说明 #

• 避免重绘已创建节点：我们用[...this.displayedItems, ...newItems]的方式追加元素，而不是直接重新赋值this.items.slice(...)，这样Angular的变更检测会识别到是数组元素的追加，而不是替换整个数组，因此只会新增DOM节点，不会重绘已有的节点。
• 滚动判断逻辑：通过scrollTop + clientHeight >= scrollHeight来判断是否滚动到容器底部，这个是通用的滚动判断方式。
• 可选优化：如果滚动事件触发太频繁，可以给onScroll方法添加节流处理，比如用setTimeout控制触发频率，避免性能问题。

关于“双索引范围迭代”的补充 #

其实你想的“上下限索引限定范围”的思路是对的，只是*ngFor是基于数组的，所以我们通过数组切片来间接实现了范围限定，本质上就是用startIndex和startIndex + pageSize作为上下限，和你设想的双索引逻辑完全一致，只是换了一种实现形式而已。

内容的提问来源于stack exchange，提问作者brk