
angularでngForの使い方がよくわからない….
この記事では上記の悩みを解決します。
angularでは配列の要素をhtmlで展開したい場合は、ngForを使ってできます。なのでその方法を解説していきます。
ちなみに私がリリースしているyoteiPickerというアプリでもngForを使っています。




休日で空いた時間の暇つぶしを探せるアプリを公開しています。
ngForの基本的な使い方
ngForの基本的な使い方ですが、配列を用意しhtml側で
<div *ngFor="let 変数 of 配列;">
<p>{{ 変数.id }}</p>
<p>{{ 変数.name }}</p>
</div>
このように使うことで、配列を展開できます。
上記の配列では、idとnameの要素があるときに、配列の要素を一つずつ取り出してidとnameを表示させます。
ngForの具体例①-数字の配列
pickIdsという配列があるとします。
pickIds: Array<number>
console.log(this.pickIds);とpickIdsをデバッグすると以下のように1307,65という数字が配列であるデータです。
Array(2)
0:1307
1:65
<div *ngFor="let pickId of pickIds;">
<p>{{ pickId }}</p>
</div>
ngForは配列の要素を一つずつ取り出すので、上記は
1307
65
と画面に表示されます。
文字列の配列も同じようにできます。
ngForの具体例②-jsonデータ型
jsonデータで以下のようにcategoryデータがあるとします。
{
"category": [
{
"category_id": 1,
"category_name": "グルメ・お酒",
"category_icon": "fastfood"
}
]
}
tsファイルで、上記のデータをcategoryという変数に代入し、html側で使える準備をします。
import CategoryJson from 'src/assets/mock/category.json';
....
ngOnInit(): void {
this.category = this.getCategoryData();
}
/**
* mockからデータを取得
*/
public getCategoryData() {
return CategoryJson.category;
}
categoryというデータを展開します。
<div *ngFor="let c of category;" (click)="onClick(c.category_id)">
<div>{{ c.category_id }}</div>
<div>
<mat-icon class="icon">{{ c.category_icon }}</mat-icon>
</div>
<div>
{{ c.category_name }}
</div>
</div>
categoryのデータにあるidやcategory_nameなどを取り出せます。
また、clickアクションに取り出したcategory_idを引数として渡すこともできます。
ngForの具体例③-配列の要素にindex
ngForの配列要素を取り出した時にindex番号をつけたい場合もあります。
その際は以下のようにindex番号を付与できます。
html側でitemsという配列を使用するのでtsファイルにitemsを定義します。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['./accordion.component.css']
})
export class AccordionComponent implements OnInit {
// アコーディオンのタイトルリスト
public items = [
'気になった予定はどうすればいいですか?',
'pickした予定はどこから確認すればいいですか?',
'管理者に予定をリクエストしたい場合はどうすればいいですか?',
];
constructor() { }
ngOnInit(): void {
}
}
html側でngForを使ってitemsの配列を展開します。
<cdk-accordion class="accordion">
<cdk-accordion-item
*ngFor="let item of items; let i = index;"
[attr.id]="'accordion-header-' + i"
[attr.aria-controls]="'accordion-body-' + i">
<div
[attr.id]="'accordion-body-' + i"
[attr.aria-labelledby]="'accordion-header-' + i">
<span *ngIf="i === 0">Pickボタンをクリックして、pickに保存しましょう。</span>
<span *ngIf="i === 1">ヘッダーのpickをクリックすると、pickした予定一覧が見れます。</span>
<span *ngIf="i === 2">フッターのリクエストをクリックし、ページ内部にあるリクエストフォームより可能です。</span>
</div>
</cdk-accordion-item>
</cdk-accordion>
itemsの配列を展開するのは今まで通り同じですが、ここではindexを付与しています。
indexを付与することで、配列の要素の何番目であるかを付与できます。
index番号は、0、1、2…となるので、最初の要素は0であることに注意です。
itemsの配列には3つの要素があるので、
[attr.id]=”‘accordion-header-‘ + i”とありますが、最初の要素では、accordion-header-‘ + 0、次の要素ではaccordion-header-‘ + 1、次の要素では、accordion-header-‘ + 2とiの部分には、index番号が代入されます。
*ngIf=”i === 0では、最初の要素であれば、itemsの最初の要素であるPickボタンをクリックして…を表示させるという内容になります。




休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント