Question

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

小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的基础知识，所以非常感谢您的帮助。谢谢！

Answer 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测试应用程序在加载时卡住了

1 个答案: