运行时的angular2-奇怪错误＆＃34; hellow word＆＃34;

时间：2016-07-02 14:02:01

标签： angular

我无法找到这个面临的基本问题的好标题。 我正在使用这个种子项目：https://www.npmjs.com/package/angular2-goldilocks-seed

尝试从此处实施一些基本命令后：https://angular.io/docs/ts/latest/guide/displaying-data.html

页面未加载。它坚持：＆＃34;正在加载......＆＃34;

greeting.ts：

import {Component} from 'angular2/core';

@Component({
  selector: 'greeting',
  templateUrl: 'app/greeting/greeting.html',
  styleUrls: ['app/greeting/greeting.css']
})
export default class Greeting {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

greeting.html：

<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
    <li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
</ul>

我在webstorm上的编译器中没有任何错误，但开发人员工具控制台发疯了：

angular2.dev.js:23524 EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Can't bind to 'ngForHero' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Property binding ngFor not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4
Property binding ngForHero not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4
angular2.dev.js:23514 EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Can't bind to 'ngForHero' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Property binding ngFor not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4
Property binding ngForHero not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.dev.js:23514 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1147(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.dev.js:23514 Error: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Can't bind to 'ngForHero' since it isn't a known native property ("
<p>Heroes:</p>
<ul>
    <li [ERROR ->]*ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:8
Property binding ngFor not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4
Property binding ngForHero not used by any directive on an embedded template ("
<p>Heroes:</p>
<ul>
    [ERROR ->]<li *ngFor="let hero of heroes">
        {{ hero }}
    </li>
"): Greeting@4:4
    at new BaseException (http://localhost:3000/lib/angular2.dev.js:8080:21)
    at TemplateParser.parse (http://localhost:3000/lib/angular2.dev.js:24042:15)
    at http://localhost:3000/lib/angular2.dev.js:24669:54
    at Zone.run (http://localhost:3000/lib/angular2-polyfills.js:138:17)
    at Zone.run (http://localhost:3000/lib/angular2.dev.js:5719:32)
    at zoneBoundFn (http://localhost:3000/lib/angular2-polyfills.js:111:19)
    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/lib/angular2-polyfills.js:1511:16)
    at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/lib/angular2-polyfills.js:1523:17)
    at lib$es6$promise$$internal$$publish (http://localhost:3000/lib/angular2-polyfills.js:1494:11)
    at http://localhost:3000/lib/angular2-polyfills.js:243:5

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/lib/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:3000/lib/angular2-polyfills.js:2253:40)
    at Zone.bind (http://localhost:3000/lib/angular2-polyfills.js:109:48)
    at bindArguments (http://localhost:3000/lib/angular2-polyfills.js:980:29)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:3000/lib/angular2-polyfills.js:1000:37)
    at TemplateCompiler._compileComponentRuntime (http://localhost:3000/lib/angular2.dev.js:24666:14)
    at RuntimeCommandFactory.componentTemplateFactory (http://localhost:3000/lib/angular2.dev.js:24695:35)
    at RuntimeCommandFactory.createBeginComponent (http://localhost:3000/lib/angular2.dev.js:19934:41)
    at CommandBuilderVisitor.visitElement (http://localhost:3000/lib/angular2.dev.js:20040:46)
    at ElementAst.visit (http://localhost:3000/lib/angular2.dev.js:19439:22)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/lib/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:3000/lib/angular2-polyfills.js:2253:40)
    at Zone.bind (http://localhost:3000/lib/angular2-polyfills.js:109:48)
    at bindArguments (http://localhost:3000/lib/angular2-polyfills.js:980:29)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:3000/lib/angular2-polyfills.js:1000:37)
    at TemplateCompiler._compileComponentRuntime (http://localhost:3000/lib/angular2.dev.js:24666:14)
    at TemplateCompiler.compileHostComponentRuntime (http://localhost:3000/lib/angular2.dev.js:24637:14)
    at RuntimeCompiler_.compileInHost (http://localhost:3000/lib/angular2.dev.js:24860:37)
    at DynamicComponentLoader_.loadAsRoot (http://localhost:3000/lib/angular2.dev.js:14530:29)
    at useFactory (http://localhost:3000/lib/angular2.dev.js:14672:39)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/lib/angular2-polyfills.js:2195:26)
    at Zone.fork (http://localhost:3000/lib/angular2-polyfills.js:2253:40)
    at NgZone._createInnerZone (http://localhost:3000/lib/angular2.dev.js:5707:39)
    at new NgZone (http://localhost:3000/lib/angular2.dev.js:5573:32)
    at createNgZone (http://localhost:3000/lib/angular2.dev.js:14693:12)
    at PlatformRef_.application (http://localhost:3000/lib/angular2.dev.js:14768:31)
    at Object.bootstrap (http://localhost:3000/lib/angular2.dev.js:25054:64)
    at execute (http://localhost:3000/app/bootstrap.js:14:23)
    at ensureEvaluated (http://localhost:3000/lib/system.src.js:2981:26)
    at Object.execute (http://localhost:3000/lib/system.src.js:3099:13)BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1148(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

1 个答案:

答案 0 :(得分：1)

angular2-goldilocks-seed项目使用 2.0.0-beta.6构建

您需要将版本更新为最新的 2.0.0-rc.4 或更改您的ngFor语法。

直到beta.17 ng看起来像这样：

<div *ngFor="#hero of heroes; #i=index">  
  {{i + 1}} - {{hero.fullName}}
</div>

从RC开始，* ngFor看起来像这样：

<div *ngFor="let hero of heroes; let i=index">  
  {{i + 1}} - {{hero.fullName}}
</div>

看看这是否有帮助。

相关问题
最新问题