Angular 4中*ngFor分页显示及点击加载更多功能实现需求

Got it, let's fix up your Angular 4 code to add the "load more" functionality with remaining hero count display. Here's a complete, working solution tailored to your needs:

First, we'll add some state tracking and helper logic to manage how many heroes are displayed and calculate remaining ones:

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

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html'
})
export class HeroListComponent {
  // Replace this with your actual hero data array
  heroes = []; 
  // Track how many heroes we're currently showing (starts at 10)
  currentDisplayCount = 10; 

  // Trigger loading 10 more heroes on click
  showMore() {
    this.currentDisplayCount += 10;
  }

  // Getter to calculate remaining heroes not yet shown
  get remainingHeroes(): number {
    return this.heroes.length - this.currentDisplayCount;
  }
}

Now update your template to use the dynamic display limit, show the remaining count, and adjust the button's visibility and text:

<ul>
  <!-- Use the dynamic count instead of hardcoded 10 -->
  <li *ngFor="let hero of heroes | slice:0:currentDisplayCount;">
    {{ hero.name }}
  </li>
</ul>

<!-- Only show the button if there are heroes left to load -->
<p *ngIf="remainingHeroes > 0" (click)="showMore()">
  Show more 10 ({{ remainingHeroes }} left)
</p>

<!-- Optional: Add a message when all heroes are displayed -->
<p *ngIf="remainingHeroes <= 0 && heroes.length > 0">
  All heroes have been loaded!
</p>

• Dynamic Display Limit: Instead of hardcoding slice:0:10, we use the currentDisplayCount variable that increments by 10 each time the button is clicked.
• Remaining Count: The remainingHeroes getter automatically calculates how many heroes are left to show, which we embed directly in the button text for clarity.
• Smart Button Visibility: The "show more" button only appears when there are still heroes to load. Once all are displayed, it hides (and we can optionally show a completion message).

This implementation is clean, follows Angular 4 best practices, and perfectly meets your requirement to load more heroes while showing the remaining count.

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