【Angular】ngForを使用して配列を指定回数分表示する

HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回は、HTMLテンプレート上でngForディレクティブとスライスパイプを使って指定した回数分だけ配列の要素を表示する方法を解説します。

実装

はじめに実際の実装を提示します。
下記の実装は、配列の最初から3つ目の要素までを表示する実装です。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  prefectures: string[] = [
      'hokkaido',
      'aomori',
      'iwate',
      'miyagi',
      'yamagata',
      'fukushima'
  ];
  ngOnInit() {}
}

app.component.html

<ul>
  <li *ngFor="let prefecture of prefectures | slice:0:3">
    {{prefecture}}
  </li>
</ul>

結果

hokkaido
aomori
iwate

解説

ngForディレクティブのみでは指定回数分だけ要素を表示することはできないため、Angularのスライスパイプを併用することによって表示を可能にします。

array | slice:start[:end]

スライスパイプはstartとendにて数値を指定して配列の要素を切り出しています。
例の場合、prefectures[0], prefectures[1], prefectures[2]のそれぞれの要素を切り出して表示していることが分かります。

また、下記のようにスライスパイプはendを指定しないことで、指定した要素以降すべてを切り出すことも可能です。

<ul>
  <li *ngFor="let prefecture of prefectures | slice:2">
    {{prefecture}}
  </li>
</ul>

結果

iwate
miyagi
yamagata
fukushima

Angular公式ドキュメント(https://angular.jp/api/common/SlicePipe)

活用場面

配列の要素が多いときの表示・非表示処理をHTMLテンプレート上で行うことができます。
さらに応用を効かせればページネーションもスライスパイプを使って実装することも可能です。

さいごに

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください

HITOSUKE採用サイト | フランチャイズのプロフェッショナル集団