Angular应用中“加载更多”按钮延迟隐藏问题的精确控制与解决方案

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

interface Employee {
  empno: number;
  ename: string;
  job: string;
  deptno: number;
}

@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 },
    // ... 更多员工数据，共12条
    { empno: 10266, ename: 'John', job: 'Programmer', deptno: 30 },
    { empno: 10267, ename: 'Alice', job: 'Tester', deptno: 40 },
  ];

  public loadMore() {
    // 原始逻辑：先检查，后更新itemsNumber，再设置more
    if (this.itemsNumber >= this.empsArray.length) {
      this.more = false; // 如果当前已加载项数大于等于总数，则隐藏按钮
    } else {
      this.itemsNumber += this.itemsNumber; // 否则，增加加载项数（翻倍）
      this.more = true; // 确保按钮可见
    }
  }
}

<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>
    <!-- 使用 slice 管道根据 itemsNumber 显示数据 -->
    <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>

<!-- 根据 more 变量控制按钮的可见性 -->
<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>

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

interface Employee {
  empno: number;
  ename: string;
  job: string;
  deptno: number;
}

@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() {
    // 步骤1：如果当前加载项数小于总数，则增加加载项数
    if (this.itemsNumber < this.empsArray.length) {
      // 可以选择固定增加量，或者像原问题一样翻倍
      // 为了避免itemsNumber过大，可以限制其最大值
      this.itemsNumber = Math.min(this.itemsNumber + 4, this.empsArray.length); // 示例：每次增加4项，但不超过总数
      // 或者沿用原逻辑的翻倍，但要确保不超过总数
      // this.itemsNumber = Math.min(this.itemsNumber * 2, this.empsArray.length);
    }

    // 步骤2：在itemsNumber更新后，立即检查是否已加载所有项
    // 这里的判断条件应为 itemsNumber >= empsArray.length
    if (this.itemsNumber >= this.empsArray.length) {
      this.more = false; // 如果已加载所有项，则隐藏按钮
    } else {
      this.more = true; // 否则，按钮可见
    }
  }
}