Template parse errors - Angular 5 - ionic-framework

Question

I've read and encountered this issue many times. I am not sure if this is related to Ang 5.I have tried to downgrade to 4. No Luck so far. Any thought.
From what I read, my attempt to resolve the below issue was to add in app.module.ts:
import { CommonModule } from '#angular/common';
import { ErrorHandler, NgModule, NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
Error in console:
" Property binding ngForIn 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" .... "
this is my code
home.html
<ion-header>
<ion-navbar>
<ion-title>
{{eventItem.title}}
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>{{eventItem.title}}</p>
<p>{{tasktItem.title}} - {{tasktItem.status}}</p>
<p>{{checkListItem.title}}</p>
<ion-list>
<ion-item *ngFor="let item in checkListItem.tasks">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
home.ts
import { Component } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NavController } from 'ionic-angular';
import { Event, Task, Checklist } from '../../app/shared/event';
import { Item, ItemType, Priority } from '../../app/shared/item';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
string:string
array:any[]
eventItem:Event;
taskItem:Task;
checkListItem:Checklist
constructor(public navCtrl: NavController) {
this.array = []
this.eventItem = new Event(10, "this is a new event", new Date(), ItemType.Event)
this.taskItem = new Task(10, "this is a new task", new Date(), ItemType.Task)
this.checkListItem = new Checklist(12, "this is a new checklist", new Date(), ItemType.Checklist)
for (let i = 1; i <= 10 ; i++) {
let task = new Task(i, `this is task number:${i}`, new Date(), ItemType.Task)
this.array.push(task)
}
this.checkListItem.tasks = this.array
this.eventItem.description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue leo. Duis consequat urna quis egestas porttitor. Sed in rhoncus velit. Vivamus euismod vestibulum nisi, eu ornare erat volutpat in. Quisque commodo nisi urna, non porttitor eros porttitor volutpat. Praesent malesuada ultrices enim ut interdum. Ut suscipit sed lorem ac facilisis. Aenean et sapien quis diam hendrerit rhoncus. Praesent ac blandit libero. Duis varius congue lorem sit amet pharetra. Etiam dictum leo eget tincidunt eleifend. Suspendisse volutpat justo augue, vitae pulvinar turpis cursus at."
this.taskItem.description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue leo. Duis consequat urna quis egestas porttitor. Sed in rhoncus velit. Vivamus euismod vestibulum nisi, eu ornare erat volutpat in. Quisque commodo nisi urna, non porttitor eros porttitor volutpat. Praesent malesuada ultrices enim ut interdum. Ut suscipit sed lorem ac facilisis. Aenean et sapien quis diam hendrerit rhoncus. Praesent ac blandit libero. Duis varius congue lorem sit amet pharetra. Etiam dictum leo eget tincidunt eleifend. Suspendisse volutpat justo augue, vitae pulvinar turpis cursus at."
}
}
this is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { CommonModule } from '#angular/common';
import { ErrorHandler, NgModule, NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
schemas: [NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Do you think this is a bug and if it should be fixed anytime soon? I do not remember having a syntax-related error in the past. I cannot really find a workaround. Thanks for the help.

Answer 1

Try this:
<ion-item *ngFor="let item of checkListItem.tasks">
instead of:
<ion-item *ngFor="let item in checkListItem.tasks">
for ... in loops over properties of objects.
for ... of loops over arrays.
From Angular docs: NgForOf