みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験から Web エンジニアに転職し、
現在正社員として 5 年働いています！
Angularの解説シリーズです。
今回はAngularのループ処理*ngForについて学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- Angularのループ処理*ngForが使える様になる
※PC に npm、node がインストールされている前提で記述します。
yarn 等をお使いの方は読み替えてください。
環境がない人はcodesansboxを使ってね！
Angularでループ処理を作ろう！
作りたいもの
まずはじめに作りたいものから見ていきましょう。
このようにそれぞれのユーザ情報が列挙される
コンポーネントを作りましょう。
*ngFor
Angularでループ処理を行うには*ngForディレクティブを使う必要があります。
■*ngForを使う構文
<タグ *ngFor="let 変数名 of 配列">このように記述することで、配列の数だけタグを複製することができます。
indexを取得する際の構文
<タグ *ngFor="let 変数名1 of 配列; let 変数名2 = index">このように記述することで、配列の番号(index)を取得することができます
app.component.tsを編集しよう
app.component.tsに配列のデータをもたせます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// 対応するHTMLファイルのパス
templateUrl: './app.component.html',
// 対応するスタイルシートのパス
styleUrls: ['./app.component.css'],
})
// app.component.htmlに渡す変数
export class AppComponent {
title = 'ユーザリスト';
// ユーザを格納する配列
userList = [
{ name: 'サメハック', id: 'A001', age: 29 },
{ name: 'ねこハック', id: 'A002', age: 31 },
{ name: 'いぬハック', id: 'A003', age: 40 },
];
}このuserListを画面に表示するよ！
app.component.htmlを編集しよう
*ngForディレクティブを用いてuserList[]の
中身を順に取り出します。
<h1>{{ title }}</h1>
<ul>
<!-- userListの中身を1つずつ取り出してループ -->
<li *ngFor="let user of userList">
ID:{{ user.id }} | 名前:{{ user.name }} | 年齢：{{ user.age }}
</li>
</ul>
Angularのループ処理が作れてえらい！
まとめ
- Angularでループ処理を作るには*ngForディレクティブを使う
- <タグ *ngFor=”let 変数名 of 配列”></タグ>
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
