如何为Angular基础表格模型构建分页器？兼容Angular Material、Bootstrap

Hey there! Since you're already using Angular Material and Bootstrap in your modal component, let's walk through two solid pagination solutions tailored to your setup. I'll also fix a couple of small issues in your original code to avoid bugs.

Option 1: Angular Material Paginator (Recommended, since you're already using Angular Material) #

This is the most seamless approach because it integrates directly with Angular's data handling utilities.

Step 1: Import the Paginator Module #

First, make sure the MatPaginatorModule is added to your feature or app module:

import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // ... your other modules (like BrowserModule, FormsModule, etc.)
    MatPaginatorModule
  ]
})
export class YourComponentModule { }

Step 2: Update Your Component TypeScript #

We'll use MatTableDataSource to manage your data and connect it to the paginator:

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

@Component({
  selector: 'your-modal-component',
  templateUrl: './your-modal-component.component.html'
})
export class YourModalComponent implements OnInit {
  // Replace `any` with your actual data type for better type safety
  dataSource = new MatTableDataSource<any>();
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  
  // Assume this is your original data array
  data: any[] = [];

  ngOnInit() {
    // Load your data here (e.g., from an API)
    // this.data = ... your data fetch logic

    // Connect data to the data source and paginator
    this.dataSource.data = this.data;
    this.dataSource.paginator = this.paginator;
  }
}

Step 3: Update Your Template #

Modify your table to use the paginated data source, and add the Material paginator:

<section style="margin-left: 2%" class="row mt-5">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Data</th>
        <th scope="col">Data</th>
        <th scope="col">Actions</th> <!-- Added action column header -->
      </tr>
    </thead>
    <tbody>
      <!-- Fixed variable name conflict (was "let data of data" which overwrites your array) -->
      <tr *ngFor="let item of dataSource.filteredData">
        <td>{{item.data}}</td> <!-- Fixed capitalization (was Data.data) -->
        <td>{{item.data}}</td>
        <td>
          <button class="btn btn-secondary" type="button" href="#updatedata" data-toggle="modal" (click)="dataClicked(item)">Edit</button>
          <button class="btn btn-danger" mwlConfirmationPopover 
                  [popoverTitle]="popoverTitle" [popoverMessage]="popoverMessage" 
                  placement="left" (confirm)="delete(item)" (cancel)="cancelClicked = true">
            Delete
          </button>
        </td>
      </tr>
      <!-- Updated to check paginated data length, fixed colspan to match column count -->
      <tr *ngIf="dataSource.filteredData.length === 0">
        <td colspan="3" class="text-center">
          <h3>No Data to Show</h3>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Angular Material Paginator -->
  <mat-paginator 
    [pageSizeOptions]="[5, 10, 25]" 
    showFirstLastButtons
    aria-label="Select page of data">
  </mat-paginator>
</section>

Option 2: Bootstrap Pagination (No extra dependencies needed) #

If you prefer to stick strictly to Bootstrap, here's a custom implementation:

Step 1: Update Your Component TypeScript #

Add pagination state variables and helper methods:

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

@Component({
  selector: 'your-modal-component',
  templateUrl: './your-modal-component.component.html'
})
export class YourModalComponent implements OnInit {
  data: any[] = []; // Your original data array
  currentPage = 1;
  itemsPerPage = 10;
  totalPages = 0;
  paginatedData: any[] = [];

  ngOnInit() {
    // Load your data here
    // this.data = ... your data fetch logic

    this.calculateTotalPages();
    this.updatePaginatedData();
  }

  calculateTotalPages() {
    this.totalPages = Math.ceil(this.data.length / this.itemsPerPage);
  }

  updatePaginatedData() {
    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
    const endIndex = startIndex + this.itemsPerPage;
    this.paginatedData = this.data.slice(startIndex, endIndex);
  }

  goToPage(page: number) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
      this.updatePaginatedData();
    }
  }

  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
      this.updatePaginatedData();
    }
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.updatePaginatedData();
    }
  }
}

Step 2: Update Your Template #

Add the Bootstrap pagination component and use the paginated data:

<section style="margin-left: 2%" class="row mt-5">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Data</th>
        <th scope="col">Data</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of paginatedData">
        <td>{{item.data}}</td>
        <td>{{item.data}}</td>
        <td>
          <button class="btn btn-secondary" type="button" href="#updatedata" data-toggle="modal" (click)="dataClicked(item)">Edit</button>
          <button class="btn btn-danger" mwlConfirmationPopover 
                  [popoverTitle]="popoverTitle" [popoverMessage]="popoverMessage" 
                  placement="left" (confirm)="delete(item)" (cancel)="cancelClicked = true">
            Delete
          </button>
        </td>
      </tr>
      <tr *ngIf="paginatedData.length === 0">
        <td colspan="3" class="text-center">
          <h3>No Data to Show</h3>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Bootstrap Pagination -->
  <nav aria-label="Page navigation" class="mt-3">
    <ul class="pagination justify-content-center">
      <li class="page-item" [class.disabled]="currentPage === 1">
        <a class="page-link" (click)="prevPage()" tabindex="-1">Previous</a>
      </li>
      <li class="page-item" 
          *ngFor="let page of [].constructor(totalPages); let i = index" 
          [class.active]="i+1 === currentPage">
        <a class="page-link" (click)="goToPage(i+1)">{{i+1}}</a>
      </li>
      <li class="page-item" [class.disabled]="currentPage === totalPages">
        <a class="page-link" (click)="nextPage()">Next</a>
      </li>
    </ul>
  </nav>
</section>

Quick Notes #

• Variable Fix: Your original code had *ngFor="let data of data" which causes a variable conflict (you're overwriting your data array with each item). I changed this to let item of ... to avoid bugs.
• Data Updates: If you add/delete data, remember to:
  • For Angular Material: Update this.dataSource.data
  • For Bootstrap: Re-run this.calculateTotalPages() and this.updatePaginatedData()

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