Angular スタンドアローンコンポーネントでngForを使うにはimportが必要だった話

AngularのスタンドアローンコンポーネントでngForを使用しようとした際にエラーが発生し、解決方法を記載しました。ngForを使用する際はTypeScriptで明示的にインポートする必要があります。その際、@ComponentのimportsにNgForを追加することで問題が解決します。

広告ここから
広告ここまで

目次

    Angularのスタンドアローンコンポーネントを使ってアプリケーションを開発する際、ngForを使おうとしてエラーに遭遇したので、その対応方法を簡単にまとめました。

    背景とエラー

    Angularを使った開発へ久しぶりに挑戦しているのですが、どうせならとスタンドアローンコンポーネントでの開発にもチャレンジしています。Angularでリスト要素を作るときなどには、ngForを使う・・・というのは覚えていたので、次のような実装をHTMLファイルに書きました。

    
        <ion-item *ngFor="let region of regions" (click)="onRegionClick(region)" button>
          <ion-label>{{ region.ja }}</ion-label>
          <ion-icon name="chevron-forward" slot="end"></ion-icon>
        </ion-item>

    すると以下のエラーメッセージと共にアプリケーションが動かなくなりました。

    NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-item' (used in the 'Tab1Page' component template). 1. If 'ion-item' is an Angular component and it has the 'ngForOf' input, then verify that it is included in the '@Component.imports' of this component. 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

    利用するコンポーネントファイルなどで、明示的インポートが必要

    ざっと調べたところどうやらngForを使いたい場合は、TypeScript側で明示的にインポートする必要があるみたいです。次のように@ComponentimportsNgForを追加すると動くようになりました。

    import { Component, OnInit } from '@angular/core';
    import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel } from '@ionic/angular/standalone';
    import { RegionService } from 'src/app/services/region.service';
    import { NavController } from '@ionic/angular';
    import { NgFor } from '@angular/common';
    
    @Component({
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss'],
      standalone: true,
      imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel, NgFor],
    })
    export class Tab1Page implements OnInit {

    参考ドキュメント

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark