처음으로 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