模板解析错误 - Angular 5

Question

我已经多次阅读并遇到过这个问题。我不确定这是否与 Ang 5.I 尝试降级到 4 有关。到目前为止运气不好。任何想法。

根据我的阅读，我尝试解决以下问题是添加 app.module.ts:

import { CommonModule } from '@angular/common';  
import { ErrorHandler, NgModule, NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

控制台错误：

" 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" .... "

这是我的代码

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."


  }


}

这是我的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 {}

您认为这是一个错误吗？是否应该尽快修复？我不记得过去有过与语法相关的错误。我真的找不到解决方法。感谢您的帮助。

Answer 1

试试这个：

    <ion-item *ngFor="let item of checkListItem.tasks">

而不是：

    <ion-item *ngFor="let item in checkListItem.tasks">

for ... in 遍历 objects.

的属性

for ... of 循环 arrays.

来自 Angular 文档：NgForOf

模板解析错误 - Angular 5

Template parse errors - Angular 5

ionic-framework

ionic2

angular2-template

angular5