Angular MaterialのPagenateを使用した時、初期時の表示に関して

前提・実現したいこと

Angularのチュートリアルのリスト表示で、MaterialのPaginateを使用し、表示させています。

実現させたいことは、リスト表示において、初期表示対応のため、２回記述しているのを１回だけにしたいです。
良い案があればご教授頂けないでしょうか？、お願いします。

発生している問題

初期表示時リストが表示されない対応として、

<div *ngIf="!pageEvent">を追加している状態です。そうなると、以下のリスト箇所において、slice箇所だけが違うのに、同じのをコピーしており、今はまだ表示列が少ないですが、多くなってくると、同じ記載なのに２箇所あり、メンテナンスが面倒です。 ```　 <li *ngFor="let hero of heroes | slice:0:5" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> ```

該当のソースコード

・hero.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import {PageEvent} from '@angular/material/paginator';


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

  heroes = HEROES;

  selectedHero: Hero;

  // MatPaginator Inputs
  length = 100;
  pageSize = 0;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  // MatPaginator Output
  pageEvent: PageEvent;

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

  constructor() {
  }

  ngOnInit() {}

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

・hero.component.html

<h2>My Heroes</h2>

<ul class="heroes">
  <div *ngIf="!pageEvent">
    <li *ngFor="let hero of heroes | slice:0:5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
  <div *ngIf="pageEvent">
    <li *ngFor="let hero of heroes | slice:(pageEvent.pageIndex)*5:(pageEvent.pageIndex+1)*5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
</ul>

<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>

行動規範の内容に同意します

回答1件

ベストアンサー

一つのやり方ですが、最初からPageEventが存在するようにしておけば

<div *ngIf="!pageEvent">

この条件はいらなくなります。

'PageEvent'とは現在の何ページ目か、１ページに何件表示させるかなどの情報が入ったオブジェクトです

https://material.angular.io/components/paginator/api#PageEvent

ngOnInit() {
  this.pageEvent = {
    length: 100,
    pageIndex: 0,
    pageSize: 20 
  }
}

こんな感じで初めにpageEventにpaginatorの初期値を入れてあげればいいと思います。
実際にはlengthはどこかからとってきたデータの個数を動的に入れることになるとは思います。

別の考え方としてはこの部分を変更してみると別の解決方法を思いつくかもしれません

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

↓↓↓

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="onPage($event)">　<-ここを変更
</mat-paginator>

------

HeroesComponent{

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

}

投稿2020/04/30 15:13