Angular 2 测试应用程序卡在加载中答案

【问题标题】：Angular 2 Testing App stuck on loadingAngular 2 测试应用程序卡在加载中
【发布时间】：2016-10-21 04:21:36
【问题描述】：

为 Angular 2 制作测试应用，但由于某种原因我无法解决，我的应用卡在“正在加载...”

这里是文件：

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

little-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 时，终端不会产生任何错误，但我确信代码中一定有一些我错过的东西。由于我仍在努力了解 Angular 2 的基础知识，因此将不胜感激。谢谢！

【问题讨论】：

问题出在这里，<input #newHero (keyup.enter)='addHero(newHero.value)'(blur)="addHero.(newHero.value); newHero.value = '' ">，你想做什么？

标签： javascript angularjs node.js typescript angular

【解决方案1】：

现在可以用这个了：

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

plunker

您可以将输入框中的值添加到列表中，如下所示：

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

【讨论】：

谢谢，我只是想按照 Angular 2 文档中的示例进行操作，但我犯了一个愚蠢的错误。