🐣

Angularの公式チュートリアルをやっていく　その９ - Use *ngFor in templates

2023/06/13に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

コンポーネントを繰り返し描画する

今回使用するngForは、コンポーネントの繰り返し構文に用いるコードのようです。
実際に実装してみましょう。

下記のようにhome.component.tsを更新しましょう。

home.component.ts

  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { HousingLocationComponent } from '../housing-location/housing-location.component';
  import { HousingLocation } from '../housinglocation';
  
  @Component({
    selector: 'app-home',
    standalone: true,
    imports: [CommonModule, HousingLocationComponent],
    template: `
      <section>
        <form>
          <input type="text" placeholder="Filter by city" />
          <button class="primary" type="button">Search</button>
        </form>
      </section>
      <section class="results">
        <app-housing-location
+         *ngFor="let housingLocation of housingLocationList"
          [housingLocation]="housingLocation"
        ></app-housing-location>
      </section>
    `,
    styleUrls: ['./home.component.css'],
  })
  export class HomeComponent {
-   housingLocation: HousingLocation = {
-     id: 9999,
-     name: 'Test Home',
-     city: 'Test city',
-     state: 'ST',
-     photo: 'assets/example-house.jpg',
-     availableUnits: 99,
-     wifi: true,
-     laundry: false,
-   };
+   housingLocationList: HousingLocation[] = [
+     {
+       id: 0,
+       name: 'Acme Fresh Start Housing',
+       city: 'Chicago',
+       state: 'IL',
+       photo: '/assets/bernard-hermant-CLKGGwIBTaY-unsplash.jpg',
+       availableUnits: 4,
+       wifi: true,
+       laundry: true
+     },
+     {
+       id: 1,
+       name: 'A113 Transitional Housing',
+       city: 'Santa Monica',
+       state: 'CA',
+       photo: '/assets/brandon-griggs-wR11KBaB86U-unsplash.jpg',
+       availableUnits: 0,
+       wifi: false,
+       laundry: true
+     },
+     {
+       id: 2,
+       name: 'Warm Beds Housing Support',
+       city: 'Juneau',
+       state: 'AK',
+       photo: '/assets/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg',
+       availableUnits: 1,
+       wifi: false,
+       laundry: false
+     },
+     {
+       id: 3,
+       name: 'Homesteady Housing',
+       city: 'Chicago',
+       state: 'IL',
+       photo: '/assets/ian-macdonald-W8z6aiwfi1E-unsplash.jpg',
+       availableUnits: 1,
+       wifi: true,
+       laundry: false
+     },
+     {
+       id: 4,
+       name: 'Happy Homes Group',
+       city: 'Gary',
+       state: 'IN',
+       photo: '/assets/krzysztof-hepner-978RAXoXnH4-unsplash.jpg',
+       availableUnits: 1,
+       wifi: true,
+       laundry: false
+     },
+     {
+       id: 5,
+       name: 'Hopeful Apartment Group',
+       city: 'Oakland',
+       state: 'CA',
+       photo: '/assets/r-architecture-JvQ0Q5IkeMM-unsplash.jpg',
+       availableUnits: 2,
+       wifi: true,
+       laundry: true
+     },
+     {
+       id: 6,
+       name: 'Seriously Safe Towns',
+       city: 'Oakland',
+       state: 'CA',
+       photo: '/assets/phil-hearing-IYfp2Ixe9nM-unsplash.jpg',
+       availableUnits: 5,
+       wifi: true,
+       laundry: true
+     },
+     {
+       id: 7,
+       name: 'Hopeful Housing Solutions',
+       city: 'Oakland',
+       state: 'CA',
+       photo: '/assets/r-architecture-GGupkreKwxA-unsplash.jpg',
+       availableUnits: 2,
+       wifi: true,
+       laundry: true
+     },
+     {
+       id: 8,
+       name: 'Seriously Safe Towns',
+       city: 'Oakland',
+       state: 'CA',
+       photo: '/assets/saru-robert-9rP3mxf8qWI-unsplash.jpg',
+       availableUnits: 10,
+       wifi: false,
+       laundry: false
+     },
+     {
+       id: 9,
+       name: 'Capital Safe Towns',
+       city: 'Portland',
+       state: 'OR',
+       photo: '/assets/webaliser-_TPTXZd9mOo-unsplash.jpg',
+       availableUnits: 6,
+       wifi: true,
+       laundry: true
+     }
+   ];
  }

今回も例によって画像は用意してくれていていないので、自分で持ってきて格納しましょう。

このサイトで「家」と調べて適当な画像を持ってきて、assetsフォルダにファイル名を変えて保存します。

ちゃんと表示されましたね。
画像では見切れていますが、全て表示されています。

templateでは

home.component.ts

<app-housing-location
  *ngFor="let housingLocation of housingLocationList"
  [housingLocation]="housingLocation"
></app-housing-location>

と一つのタグしか記述していないのに、10個のコンポーネントが並んでいます。

これが繰り返しの力です。

housingLocationListがデータ配列のプロパティ名であり、これをlet ~~ of ~~構文で使用することで、繰り返しを実現しています。

これまで画面表示部分の繰り返しはJSP、JSX、PHPなどいろいろ使ってきましたが、今回のngForは結構特殊な書き方ですね。新鮮です。

画面表示変化しなかったり、エラーが起きて上手くいかない場合は、次のことが考えられます。

変更したファイルを保存していない
変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

何か間違いがないか、今一度確認してみましょう。

これにてUse *ngFor in templatesは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その８ - Add dynamic values to templates
→　次へ　Angularの公式チュートリアルをやっていく　その１０ - Angular services

コンポーネントを繰り返し描画する

Discussion