Angular 2測試應用程序在加載時卡住了

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 個解決方案

解決方案1
3 已采納 2016-06-20 02:24:07

Angular 2測試應用程序在加載時卡住了

問題描述

1 個解決方案

解決方案1 3 已采納 2016-06-20 02:24:07

解決方案1
3 已采納 2016-06-20 02:24:07