副業におすすめなサイトを見る→

【Angular】ngForで配列の要素を順番に取り出し画面に表示

ngFor

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

angularでngForの使い方がよくわからない….

この記事では上記の悩みを解決します。

angularでは配列の要素をhtmlで展開したい場合は、ngForを使ってできます。なのでその方法を解説していきます。

ちなみに私がリリースしているyoteiPickerというアプリでもngForを使っています。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

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

Contents

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ボタンをクリックして…を表示させるという内容になります。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

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

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる