angular2testing应用卡在加载

为Angular 2制作一个testing应用程序,但由于某些原因,我无法解决,我的应用程序被卡在“正在加载…”

这里是文件:

app.component.ts:

import {Component} from '@angular/core'; import {LittleTourComponent} from './little-tour.component'; @Component({ selector: 'my-app', template: ` <h1>Test</h1> <little-tour></little-tour> `, directives: [LittleTourComponent] }) export class AppComponent { } 

小tour.component.ts:

 import {Component} from '@angular/core'; @Component ({ selector: 'little-tour', template: ` <input #newHero (keyup.enter)='addHero(newHero.value)' (blur)="addHero.(newHero.value); newHero.value = '' "> <button (click) = addHero(newHero.value)>Add</button> <ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul> `, }) export class LittleTourComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; addHero (value: string) { if (value) { this.heroes.push(value); } } } 

index.html的:

 <html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading...</my-app> </body> </html> 

和main.ts:

 import {bootstrap} from '@angular/platform-browser-dynamic'; import {AppComponent} from './app.component'; bootstrap(AppComponent); 

当我启动npm时,terminal不会产生任何错误,但是我确定在代码中我必须忽略一些东西。 由于我仍然试图围绕Angular 2的基础,你的帮助将不胜感激。 谢谢!

       

网上收集的解决方案 "angular2testing应用卡在加载"

现在它适用于这个:

  <input #newHero (keyup.enter)='addHero(newHero.value)' (blur)="addHero" newHero.value = '' > 

plunker

您可以将input框中的值添加到列表中,如下所示:

 <input [(ngModel)] = "newHero"> <button (click) = addHero(newHero)>Add</button> <ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>