角度分页器未加载第一页答案

【问题标题】：angular paginator not loading first page角度分页器未加载第一页
【发布时间】：2020-12-14 06:29:45
【问题描述】：

首先，我知道有几个类似的问题，但我没有设法让它按我想要的方式工作。这是任何人都可以向分页器询问的最简单的事情。立即加载第一页，无需按下一页和上一页按钮。

我的 HTML

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

</mat-paginator>

<div  *ngIf="pageEvent">
    <mat-grid-list cols="2" rowHeight="7:1">
      <ng-container>
        <mat-grid-tile>
            pageIndex = {{ pageEvent.pageIndex }}
        </mat-grid-tile>
      </ng-container>
    </mat-grid-list>
</div>

和打字稿

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

@Component({
  selector: 'app-room',
  templateUrl: './room.component.html',
  styleUrls: ['./room.component.css']
})
export class RoomComponent implements OnInit {

  // MatPaginator inputs
  length = 6;
  pageSize = 1;

  // MatPaginator output
  pageEvent: PageEvent;

  constructor() { }

  ngOnInit(): void {}

}

this 或 this 等帖子的答案无效。

任何帮助都将不胜感激！

编辑：我发布了整个 ts 文件。

【问题讨论】：

可以把ts文件也发一下吗？
@AustinTFrench 我用 ts 文件编辑了我的帖子。
TS 没有数据，也没有订阅获取数据。我怀疑你想要的是在 OnInit 方法中添加一个数据调用。
不，这不是问题所在。根据适当的 pageIndex，我想从我的 HTML 中显示的只是pageIndex = 1, 2, 3...。所以当它加载时我希望它显示pageIndex = 0。但它不这样做。我必须按下一页才能显示pageIndex = 1，然后按上一页才能最终显示pageIndex = 0。
尝试在 onInit 方法中初始化一些东西或注入它，以便在不发生 PageEvent 的情况下加载值。

标签： angular pagination angular-material

【解决方案1】：

你在一个事件上使用 *ngIf （直到有东西触发它才会真正有值）

但是，您可以执行以下操作：

TS：

ngOnInit(): void {
    this.pageEvent = new PageEvent();
  }

  getPageIndex(){
      if (!this.pageEvent.pageIndex)
      {
        return 0;
      }
      else
      {
        return this.pageEvent.pageIndex;
      }
    }

然后是HTML，调用函数即可：

<div  *ngIf="pageEvent">
    <mat-grid-list cols="2" rowHeight="7:1">
      <ng-container>
        <mat-grid-tile>
            pageIndex = {{getPageIndex()}}
        </mat-grid-tile>
      </ng-container>
    </mat-grid-list>
</div>

【讨论】：