アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

AngularでAPIから配列を取得した想定で出力してみた。

Angularで配列に内包された複数のオブジェクトを出力する話

APIからオブジェクトの値を受け取り出力することを想定して書いていこうと思います。

コードはこちら codeSandBox

TS側の実装

// app/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 {
  list = [];
  ngOnInit(): void {
    this.wrap();
  }

  wrap() {
    this.list = [{ oyatu: "アイス" }, { oyatu: "ポテチ" }, { oyatu: "バナナ" }];
  }
}

まずはlistを空の配列としてプロパティを定義しましょう。
次にwrapという関数を作成し、そこに空の配列listへオブジェクトを定義していきます。
最後にngOnInitの中へwrap関数を置きコンポーネントの初期化時に発火されるようにします。

エレメント側

<div *ngFor="let item of list">
  <h1>
    {{ item.oyatu }}
  </h1>
</div>

*ngForの使い方は

<xxx *ngFor='let 仮引数 of コンポーネントのプロパティ'>

となります。
今回はlistの中身を回したいのでコンポーネントのプロパティへlistを入れます。
list配列の中にあるoyatuというkeyを取得したいのでitem.oyatuと記入すると下記のように取得できるかと思います。

以上です！