Angular 5中基于HttpClient实现大JSON数据的无限滚动问题

别担心，你肯定是被示例里的字符串生成代码误导了——ngx-infinite-scroll完全支持复杂的JSON对象数组，完全能满足你的需求！下面我给你一步步实现你要的功能：

1. 安装并导入组件 #

首先确保你已经安装了适配Angular 5的ngx-infinite-scroll版本（比如^7.x系列），然后在你的模块中导入指令：

import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  imports: [
    // ...其他模块
    InfiniteScrollModule
  ]
})
export class YourModule { }

2. 组件逻辑实现 #

在你的组件类中，我们会模拟大型JSON数据源，初始化展示前5条，并实现滚动加载更多的逻辑：

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

@Component({
  selector: 'app-json-infinite-scroll',
  templateUrl: './json-infinite-scroll.component.html',
  styleUrls: ['./json-infinite-scroll.component.css']
})
export class JsonInfiniteScrollComponent {
  // 模拟你的大型JSON数据源（这里用对象数组示例，结构可以完全自定义）
  largeJsonData = Array.from({ length: 100 }, (_, index) => ({
    id: index + 1,
    name: `数据项 ${index + 1}`,
    details: {
      category: `分类${Math.floor(index / 10) + 1}`,
      value: Math.random() * 100
    }
  }));

  // 绑定到视图的展示数组，初始仅加载前5条
  displayedItems = this.largeJsonData.slice(0, 5);
  // 当前已加载的条目数
  loadedCount = 5;
  // 每次滚动加载的数量
  batchSize = 5;

  // 滚动到底部时触发的加载方法
  onScrollLoad() {
    const nextStart = this.loadedCount;
    const nextEnd = this.loadedCount + this.batchSize;

    // 避免超出总数据长度
    if (nextStart < this.largeJsonData.length) {
      // 从数据源截取新批次的数据
      const newItems = this.largeJsonData.slice(nextStart, Math.min(nextEnd, this.largeJsonData.length));
      // 将新数据添加到展示数组
      this.displayedItems.push(...newItems);
      // 更新已加载计数
      this.loadedCount += newItems.length;
    }
  }
}

3. 模板与样式 #

在模板中，我们需要给滚动容器设置固定高度，并绑定无限滚动指令：

<!-- 滚动容器：必须设置固定高度和滚动属性 -->
<div class="scroll-container" 
     infiniteScroll 
     [scrollDistance]="1" 
     [scrollThrottle]="500" 
     (scrolled)="onScrollLoad()">

  <!-- 循环渲染JSON对象的属性 -->
  <div class="data-item" *ngFor="let item of displayedItems">
    <h4>{{ item.name }} (ID: {{ item.id }})</h4>
    <p>分类: {{ item.details.category }}</p>
    <p>数值: {{ item.details.value | number:'1.2-2' }}</p>
    <hr>
  </div>

  <!-- 加载状态提示 -->
  <div *ngIf="loadedCount < largeJsonData.length" class="loading-text">加载中...</div>
  <div *ngIf="loadedCount >= largeJsonData.length" class="end-text">已加载全部数据</div>
</div>

添加基础样式确保容器可滚动：

.scroll-container {
  height: 600px;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid #eee;
}

.data-item {
  margin-bottom: 1rem;
}

.loading-text, .end-text {
  text-align: center;
  padding: 1rem;
  color: #666;
}

• 示例里的generateWord()只是演示用，ngx-infinite-scroll对数组元素类型没有限制，你可以完全用自己的JSON对象数组
• 使用slice()截取数据源的批次数据，再通过扩展运算符push(...newItems)添加到展示数组，Angular的变更检测会自动更新视图
• scrollDistance控制触发加载的时机（1代表滚动到容器底部时触发，0.5代表滚动到距离底部一半位置时触发）
• scrollThrottle是节流时间，避免滚动时频繁触发加载逻辑

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