Angular 2网格分页中正确显示可见条目数量的实现方法

Hey there! Let's get that pagination status text sorted for your Angular 2 grid—it's simpler than you might think. Here's a step-by-step breakdown of how to implement the "Showing X-Y users of Z in total" message you want:

1. Set up your core variables #

First, in your component class, define the key values you'll need:

• currentPage: Tracks which page the user is on (we'll use 1-based numbering here, since that's more intuitive for users)
• pageSize: Your fixed value of 5
• totalUsers: The total number of users in your dataset (you'll get this from your API or data source)

2. Create a calculated property for the status text #

Instead of hardcoding values, use a getter property to dynamically compute the start and end range of visible users. This will automatically update whenever currentPage or totalUsers changes.

Here's what your component might look like:

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

@Component({
  selector: 'app-user-grid',
  templateUrl: './user-grid.component.html'
})
export class UserGridComponent {
  currentPage = 1; // Start on the first page
  pageSize = 5;
  totalUsers = 7; // Replace this with your actual total count from your data service

  // Getter to generate the pagination status text
  get paginationStatus(): string {
    // Calculate the first visible user number
    const startUser = (this.currentPage - 1) * this.pageSize + 1;
    // Calculate the last visible user number (don't exceed total users)
    const endUser = Math.min(this.currentPage * this.pageSize, this.totalUsers);
    
    return `Showing ${startUser}-${endUser} users of ${this.totalUsers} in total`;
  }

  // Example method to handle page changes (connect this to your pagination buttons)
  navigateToPage(pageNumber: number): void {
    this.currentPage = pageNumber;
    // Add your logic here to load the correct page of data into your grid
  }
}

3. Bind the status text in your template #

Now just display the calculated status in your component's HTML. You can also add basic pagination controls to test it out:

<!-- Your grid display goes here (table, list, etc.) -->

<!-- Pagination status message -->
<div class="pagination-status">
  {{ paginationStatus }}
</div>

<!-- Simple pagination controls -->
<button 
  (click)="navigateToPage(currentPage - 1)" 
  [disabled]="currentPage === 1"
>
  Previous
</button>
<span>Page {{ currentPage }}</span>
<button 
  (click)="navigateToPage(currentPage + 1)" 
  [disabled]="currentPage * pageSize >= totalUsers"
>
  Next
</button>

If you're using a third-party pagination component (like Angular Material's MatPaginator) #

If you're leveraging a pre-built paginator, the logic is almost identical—you just pull values from the paginator instance instead of managing currentPage yourself:

import { Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-user-grid',
  templateUrl: './user-grid.component.html'
})
export class UserGridComponent {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  totalUsers = 7; // Your total dataset count

  get paginationStatus(): string {
    // MatPaginator uses 0-based page indexing, so adjust the calculation
    const startUser = this.paginator.pageIndex * this.paginator.pageSize + 1;
    const endUser = Math.min((this.paginator.pageIndex + 1) * this.paginator.pageSize, this.totalUsers);
    
    return `Showing ${startUser}-${endUser} users of ${this.totalUsers} in total`;
  }
}

This setup will automatically handle edge cases—like the last page where you have fewer than 5 users (just like your example with 7 total users, the second page will show "Showing 6-7 users of 7 in total").

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