Ошибки синтаксического анализа шаблона - angular 5

Я читал и сталкивался с этой проблемой много раз. Я не уверен, связано ли это с Ang 5. Я пытался понизить до 4. Пока что не повезло. Любая мысль.

Из того, что я прочитал, моя попытка решить приведенную ниже проблему заключалась в добавлении в app.module.ts:

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

Ошибка в консоли:

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

это мой код

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 {}

Считаете ли вы, что это ошибка, и нужно ли ее исправить в ближайшее время? Я не помню, чтобы в прошлом у меня была ошибка, связанная с синтаксисом. Я не могу найти обходной путь. Спасибо за помощь.

вы можете включить app.module.ts?

Suraj Rao 11.04.2018 14:24

Я только что добавил свой app.module.ts. он включает импорт {CommonModule} из '@ angular / common'.

user4422315 11.04.2018 14:32

у вас случайно есть Главная страницаМодуль? т.е. вы используете ленивую загрузку?

Suraj Rao 11.04.2018 14:33

нет HomePageModule. это ошибка, которую я прочитал в консоли: «Привязка свойства ngForIn не используется ни одной директивой во встроенном шаблоне. Убедитесь, что имя свойства написано правильно и все директивы перечислены в" @ NgModule.declarations ".... "

user4422315 11.04.2018 14:48

Хорошо .. зачем импортировать CommonModule на страницу?

Suraj Rao 11.04.2018 14:53

Также вы можете подтвердить свою ионную версию? Я установил тег, так как вы, похоже, не используете ленивую загрузку

Suraj Rao 11.04.2018 15:01

Я использую ionic 3 и angular 5. Я читал, что мне может потребоваться импортировать CommonModule. Поэтому. Я тоже нахожу это странным

user4422315 11.04.2018 15:22

Удалите импорт как со страницы, так и с модуля .. Я думаю, что он не распознает ion-item с директивой angular по какой-то причине

Suraj Rao 11.04.2018 15:31

импортировать HttpClientModule и добавить в массив импорта в вашем модуле приложения, если вы используете это

Suraj Rao 11.04.2018 15:32

Спасибо, Сурадж. Я удалил импорт

user4422315 11.04.2018 16:50
0
10
221
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это:

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

вместо:

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

для ... в перебирает свойства объекты.

для ... из зацикливается на массивы.

Из документов Angular: NgForOf

исправлено, это действительно <ion-item * ngFor = "let item in checkListItem.tasks">. Спасибо за помощь

user4422315 11.04.2018 16:50

Я рад, если смогу помочь;) Не забудьте пометить это как ответ, если он устранил вашу проблему.

August 11.04.2018 16:51

Другие вопросы по теме