Angular 2+应用中Load more按钮延迟隐藏问题排查与修复

我正在开发一个Angular 2+应用，实现了点击“Load more”按钮加载更多数据的功能。

当前代码实现 #

users.component.ts #

import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent {
  public itemsNumber: number = 4;

  public more: Boolean = true;

  public empsArray: Employee[] = [
    { empno: 10256, ename: 'Scott', job: 'Manager', deptno: 10 },
    { empno: 10257, ename: 'Smith', job: 'Lead', deptno: 20 },
    { empno: 10258, ename: 'Sandy', job: 'Programmer', deptno: 30 },
    { empno: 10259, ename: 'Sam', job: 'Tester', deptno: 40 },
    { empno: 10260, ename: 'Jane', job: 'Manager', deptno: 10 },
    { empno: 10261, ename: 'Jim', job: 'Lead', deptno: 20 },
    { empno: 10262, ename: 'Prter', job: 'Programmer', deptno: 30 },
    { empno: 10263, ename: 'Andrew', job: 'Tester', deptno: 40 },
    { empno: 10264, ename: 'Andy', job: 'Manager', deptno: 10 },
    { empno: 10265, ename: 'Gina', job: 'Lead', deptno: 20 },
    { empno: 10266, ename: 'John', job: 'Programmer', deptno: 30 },
    { empno: 10267, ename: 'Alice', job: 'Tester', deptno: 40 },
  ];

  public loadMore() {
    if (this.itemsNumber >= this.empsArray.length) {
      this.more = false;
    } else {
      this.itemsNumber += this.itemsNumber;
      this.more = true;
    }
  }
}

users.component.html #

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Employee Number</th>
      <th>Employee Name</th>
      <th>Employee Job</th>
      <th>Employee Deptno</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of empsArray | slice: 0:itemsNumber">
      <td>{{ item.empno }}</td>
      <td>{{ item.ename }}</td>
      <td>{{ item.job }}</td>
      <td>{{ item.deptno }}</td>
    </tr>
  </tbody>
</table>

<div *ngIf="more" class="my-2 d-flex align-items-center justify-content-center">
  <button (click)="loadMore()" class="btn btn-primary">Load more</button>
</div>

问题 #

我希望当empsArray的最后一条数据加载完成时，隐藏包含按钮的div，但实际情况是，最后一条数据加载完成后，需要再点击一次按钮，该div才会消失。

疑问解答 #

1. 问题出在哪里？ #

核心问题是逻辑顺序错误：

• 当前loadMore方法先判断itemsNumber是否已经大于等于数组长度，再更新itemsNumber。但实际流程是，点击按钮的目的是加载更多，应该先更新显示数量，再判断是否已经显示全部数据。
• 另外，itemsNumber采用翻倍增长的方式（itemsNumber += itemsNumber），会导致当最后一次点击时，itemsNumber直接跳到16（数组长度是12），此时进入else分支设置more = true，直到下一次点击才会触发if条件把more设为false。

具体流程示例：

• 初始itemsNumber=4，more=true
• 第一次点击：4<12，itemsNumber变成8，more=true
• 第二次点击：8<12，itemsNumber变成16，more=true（此时已显示全部12条数据，但more仍为true）
• 第三次点击：16>=12，more=false，按钮隐藏

2. 最可靠的修复方法 #

推荐两种方案，按需选择：

方案一：简化逻辑，移除more变量（更简洁可靠）

直接在模板中通过判断当前显示数量和数组总长度控制按钮显示，不需要维护额外的more状态，避免状态不一致：

修改模板中的div：

<div *ngIf="itemsNumber < empsArray.length" class="my-2 d-flex align-items-center justify-content-center">
  <button (click)="loadMore()" class="btn btn-primary">Load more</button>
</div>

修改loadMore方法，确保itemsNumber不超过数组长度，同时每次加载固定数量（比翻倍更符合常规加载逻辑）：

public loadMore() {
  // 每次加载4条，最多不超过数组总长度
  this.itemsNumber = Math.min(this.itemsNumber + 4, this.empsArray.length);
}

如果坚持保留翻倍逻辑，可改为：

public loadMore() {
  const newNumber = this.itemsNumber * 2;
  // 限制最大为数组长度
  this.itemsNumber = Math.min(newNumber, this.empsArray.length);
}

方案二：调整原逻辑顺序（保留more变量）

如果不想修改模板，仅调整TS逻辑，确保先更新itemsNumber，再判断是否显示全部：

public loadMore() {
  // 先更新显示数量（这里用固定加4，也可换成翻倍逻辑）
  this.itemsNumber += 4;
  // 超过数组长度则设为总长度
  if (this.itemsNumber > this.empsArray.length) {
    this.itemsNumber = this.empsArray.length;
  }
  // 判断是否还有更多数据
  this.more = this.itemsNumber < this.empsArray.length;
}

修改后，最后一次点击加载完所有数据时，more会直接变为false，按钮立即隐藏，无需额外点击。

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