Angular ngFor ディレクティブ エラー 解決

Angularで発生するエラー「Exception: Can't bind to 'ngFor' since it isn't a known native property」の解説

エラーの意味

このエラーは、Angularのテンプレート内でngForディレクティブを使用しようとした際に、AngularがngForをブラウザが認識するネイティブのプロパティとして認識できなかった場合に発生します。つまり、AngularがngForをブラウザに理解させるための適切な処理を行えなかったということです。

原因

このエラーの主な原因は、以下のいずれかです。

1. Angularモジュールのインポートエラー
   
   • ngForディレクティブを使用するために必要なCommonModuleを適切にインポートしていない場合。
2. テンプレート構文の誤り
   
   • ngForディレクティブの構文が間違っている場合。
3. バージョンの不一致
   

解決方法

1. CommonModuleのインポート
   

   • app.module.tsファイルにCommonModuleをインポートし、imports配列に追加します。

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   
   im   port { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       CommonModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppM   odule { }
   

2. テンプレート構文の確認
   

   • ngForディレクティブの構文が正しいことを確認します。

   <ul>
     <li *ngFor="let item of items">{{ item }}</li>
   </ul>
   

3. バージョンの確認
   

AngularのngForディレクティブエラーの解決例

エラー

Exception: Can't bind to 'ngFor' since it isn't a known native property

このエラーは、Angularのテンプレート内でngForディレクティブを使用しようとした際に、AngularがngForをブラウザが認識するネイティブのプロパティとして認識できなかった場合に発生します。

エラーが発生する例

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

解決例

// app.module.ts
import { CommonModule } from '@angular/common';

@NgModule({
  // ...
  imports: [
    BrowserModule,
    CommonModule // CommonModuleを追加
  ],
  // ...
})

Exception: Can't bind to 'ngFor' since it isn't a known native property

代替方法

1. *ngIfとループ
   

   • *ngIfディレクティブを使用して、配列の要素数をチェックし、要素が存在する場合にのみループを実行します。

   <ul>
     <li *ngIf="items.length > 0">
       <li *ngFor="let item of items">{{ item }}</li>
     </li>
   </ul>
   

2. ngTemplateとngIf
   

   • ngTemplateディレクティブを使用してテンプレートを定義し、ngIfディレクティブを使用して条件に基づいてテンプレートを表示します。

   <ng-template #itemTemplate let-item>
     <li>{{ item }}</li>
   </ng-template>
   
   <ul>
     <ng-container *ngIf="items.length > 0">
       <ng-template ngFor let-item [ngForOf]="items">
         <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
       </ng-template>
     </ng-container>
   </ul>
   

3. カスタムディレクティブ
   

   • カスタムディレクティブを作成して、ngForディレクティブの機能を実装します。

   import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
   
   @Directive({
     selector: '[myFor]'
   })
   export class MyForDirective {
     @Inpu   t() myForOf: any[];
   
     constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
   
     ngOnChanges() {
       this.viewContainer.cl   ear();
       for (let item of this.myForOf) {
         this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: item });
       }
     }
   }
   

   <ul>
     <li *myFor="let item of items">{{ item }}</li>
   </ul>