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側で明示的にインポートする必要があるみたいです。次のように@Component
のimports
にNgFor
を追加すると動くようになりました。
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 {