Ionic中如何用*ngFor分批展示数组并实现无限滚动？

要实现先显示前30条数据、滚动加载后续内容的需求，你需要从数据逻辑处理和模板组件调整两部分修改代码：

1. 组件TS代码修改 #

首先在组件类中添加分页相关变量，拆分全量数据与展示数据，同时完善数据加载逻辑：

// 分页配置
itemsPerPage: number = 30; // 每页展示数量
currentPage: number = 1;
allPermisos: any[] = []; // 存储接口返回的全量数据
displayedPermisos: any[] = []; // 存储当前要渲染的分页数据

MisPermisos(datos){  
    this.proveedor.MostrarPermisos(datos).subscribe(
      async (dataReturnFromService2)=>{
        this.dataFromService2 = dataReturnFromService2;
        let obj2 = JSON.parse(this.dataFromService2);
        if(dataReturnFromService2 == '{"Table":[]}'){
          this.noHayPermisos();
        }
        else{
          // 保存全量数据
          this.allPermisos = obj2.Table;
          // 初始化加载第一页数据
          this.loadInitialData();
        }
      }
    )
  }

// 加载初始的第一页数据
loadInitialData() {
  const endIndex = this.itemsPerPage * this.currentPage;
  this.displayedPermisos = this.allPermisos.slice(0, endIndex);
}

// 滚动加载更多数据的方法
loadMore(event: any) {
  this.currentPage++;
  const startIndex = (this.currentPage - 1) * this.itemsPerPage;
  const endIndex = this.currentPage * this.itemsPerPage;
  // 截取当前页数据并合并到展示数组
  const newItems = this.allPermisos.slice(startIndex, endIndex);
  this.displayedPermisos = [...this.displayedPermisos, ...newItems];
  
  // 通知无限滚动组件加载完成
  event.target.complete();
  
  // 没有更多数据时禁用滚动加载
  if (this.displayedPermisos.length >= this.allPermisos.length) {
    event.target.disabled = true;
  }
}

2. 模板代码修改 #

简化原有的嵌套循环，直接遍历分页后的展示数组，同时添加Ionic官方的无限滚动组件：

<!-- 渲染分页后的权限卡片 -->
<ion-card class="{{val.Status}}" *ngFor="let val of displayedPermisos"> 
  <ion-card-header class="headerClass">
    <ion-row>
      <ion-col size="11"><ion-label class="titulo">{{val.Permiso}}</ion-label></ion-col>
      <ion-col *ngIf="val?.Status == 'Autorizado'" size="1" ><ion-icon color="success" style="zoom:1.5;" name="checkmark-circle-outline"></ion-icon></ion-col>
      <ion-col *ngIf="val?.Status == 'Rechazado'" size="1"><ion-icon color="danger" style="zoom:1.5;" name="close-circle-outline"></ion-icon></ion-col>
      <ion-col *ngIf="val?.Status == 'Pendiente'" size="1"><ion-icon color="warning" style="zoom:1.5;" name="help-circle-outline"></ion-icon></ion-col>
    </ion-row>
  </ion-card-header> 
  <ion-card-content>
    <ion-row>
      <ion-col size="12" ><b>Fecha de inicio: </b> {{val.FechaInicio | date: 'd/M/yyyy'}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col *ngIf="val?.FechaFin != null" size="12" ><b>Fecha de termino: </b> {{val.FechaFin | date: 'd/M/yyyy'}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="6"><b>Hora de inicio:</b> {{val.HoraInicio}}</ion-col>
      <ion-col  size="6"><b>Hora termino:</b> {{val.HoraFin}}</ion-col>
    </ion-row>
    <ion-row *ngIf="val?.FechaReanudacion != null">
      <ion-col size="12" ><b>Fecha reanudacion: </b> {{val.FechaReanudacion | date: 'd/M/yyyy'}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col *ngIf="val?.Status == 'Rechazado'"  size="12" ><b>Motivo:</b> {{val.Comentarios}}</ion-col>
    </ion-row>
  </ion-card-content>
</ion-card>

<!-- 无限滚动触发组件 -->
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
  <ion-infinite-scroll-content
    loadingSpinner="circles"
    loadingText="加载更多数据...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

核心逻辑说明 #

• 全量数据与展示数据分离：allPermisos存储接口返回的所有数据，displayedPermisos只存储当前要渲染的分页片段，避免一次性渲染大量DOM节点导致性能卡顿。
• 滚动加载触发：ion-infinite-scroll会在页面滚动到底部时自动调用loadMore方法，加载完成后必须调用event.target.complete()告知组件状态。
• 边界处理：当展示数据总量等于全量数据时，禁用无限滚动组件，防止无效的重复加载请求。

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