angular - Angular 9 中的分页问题

Question

我在一个页面中有 3 个块。我已经在所有 3 个块上实现了分页。

问题：当我尝试将 a 导航到第一个块中的不同页面时，例如第一个块中的 3，3 在所有 3 个块中都突出显示。无论 3 是否是第 2 和第 3 块中的有效数字。但是，每个块中显示的数据没有变化。

我ngFor在实现分页时使用。

标签： angularngfor

Answer 1

问题似乎是ngFor。没有代码我只能猜你做了什么。请在此处发布您的代码，以便我们更好地了解您所做的事情。通常你不应该使用 nngFor 进行分页。这是一个使用示例：

import {Component} from '@angular/core';
import {PageEvent} from '@angular/material/paginator';

/**
 * @title Configurable paginator
 */
@Component({
  selector: 'paginator-configurable-example',
  templateUrl: 'paginator-configurable-example.html',
  styleUrls: ['paginator-configurable-example.css'],
})
export class PaginatorConfigurableExample {
  // MatPaginator Inputs
  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  // MatPaginator Output
  pageEvent: PageEvent;

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    if (setPageSizeOptionsInput) {
      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
    }
  }
}

.mat-form-field {
  margin-right: 12px;
}

<mat-form-field>
  <mat-label>List length</mat-label>
  <input matInput [(ngModel)]="length" type="number">
</mat-form-field>

<mat-form-field>
  <mat-label>Page size</mat-label>
  <input matInput [(ngModel)]="pageSize" type="number">
</mat-form-field>
<mat-form-field>
  <mat-label>Page size options</mat-label>
  <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
         [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
</mat-form-field>

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>