ionic で*ngForが動作しなかった時の対処法

初めてionicを使ってアプリ開発を行なっているのだが、*ngForが動作せずにつまずいたことがあったので、メモがてら残しておく。

動作環境

• macOS HighSierra 10.13.6
• ionic 4.1.2
• npm 6.4.1
• Node v10.10.0

備考

ただのメモなのでionicのインストール等は記載しませんので、ご了承ください。
ionicのサイトはこちら

やろうとしたこと

ページの中にある機能を別のコンポーネントファイルに分けることで、コードをスッキリさせる！

まずは新しいコンポーネントを作成する。

terminal

$ ionic g component hoge

続いてapp.module.tsに下記を追加する。

app.module.ts

import { ComponentsModule } from "../components/components.module";  ////←これを追加する

@NgModule({
  declarations: [...],
  imports: [
    ...
    ComponentsModule,  //←これを追加する
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [... ],
  providers: [...]
})

それと呼び出したいページの.tsファイルに下記を追加。

index.ts

import { ComponentsModule } from "../../components/components.module";

作ったコンポーネントファイルのテンプレートはこんな感じ。

hoge.html

<ion-list>
  <ion-card *ngFor="let card of cards">
    <ion-card-content>
      <ion-card-title>Hello World</ion-card-title>

      <p>The content for this card</p>
    </ion-card-content>
  </ion-card>
</ion-list>

hoge.ts

export class HogeConponent {
  cards: Array<{title: string, note: string}>;

  constructor() {
    this.cards = [];
    for (let i = 1; i < 6; i++) {
      this.cards.push({
        title: 'title ' + i,
        note: 'test' + i,
      });
    }
  }

}

今回発生した問題

ブラウザに表示された内容はこちら。

Uncaught Error: Template parse errors:
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

直訳すると、ここで*ngForなんて使えない（存在しない？）って怒られてるっぽいです。
なので既存のモジュールをインポートする必要があるそうなんですね...

ということでインポートしましょう。

components.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
	...
	imports: [CommonModule],
	...
})

これでなんとか動くようになりました！！
お疲れ様でした！！

ちょっとした雑談

実は私AngularどころかJavaScriptですらほぼ初めて触るので、本当にわからないことだらけでこんな初歩的なことにつまづいてばかりです笑
ですがこれを通して技術力を上げれている気がするので、なんだかんだ毎日楽しんでます笑

参考にした記事

ANGULAR2: ERROR – CAN’T BIND TO ‘NGFOROF’ SINCE IT ISN’T A KNOWN PROPERTY