首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >模板解析错误.角度5

模板解析错误.角度5
EN

Stack Overflow用户
提问于 2018-04-11 12:18:48
回答 1查看 227关注 0票数 0

我读过很多次这个问题,也遇到过很多次。我不确定这是否与Ang 5有关。我试着把等级降到4级。到目前为止没有运气。任何想法。

根据我所读到的,我解决以下问题的尝试是在app.module.ts中添加:

代码语言:javascript
复制
import { CommonModule } from '@angular/common';  
import { ErrorHandler, NgModule, NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

控制台中的错误:

“嵌入模板上的任何指令都不使用属性绑定ngForIn。请确保属性名拼写正确,所有指令都列在"@NgModule.declarations”.中。“

这是我的密码

home.html

代码语言:javascript
复制
<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

代码语言:javascript
复制
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

代码语言:javascript
复制
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 {}

你认为这是个错误吗?如果很快就能修好的话?我不记得在过去有一个与语法相关的错误。我真的找不到解决办法。谢谢你的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-11 14:37:41

试试这个:

代码语言:javascript
复制
    <ion-item *ngFor="let item of checkListItem.tasks">

而不是:

代码语言:javascript
复制
    <ion-item *ngFor="let item in checkListItem.tasks">

代表..。在中,对对象的属性进行循环。

代表..。数组上的循环。

来自角度文档:NgForOf

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49774941

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档