Fatal编程技术网
  • angular/
  • 什么'；我的Angular 2应用程序（TypeScript）有问题

什么'；我的Angular 2应用程序（TypeScript）有问题

angular web-applications typescript

什么'；我的Angular 2应用程序（TypeScript）有问题,angular,web-applications,typescript,angular2-directives,Angular,Web Applications,Typescript,Angular2 Directives,我有一个组件EventListComponent import { Component } from 'angular2/core'; @Component ({ selector: 'el-events', templateUrl: 'app/events/event-list.component.html' }) export class EventListComponent { pageTitle: string = 'Events List'; } impo

我有一个组件EventListComponent

import { Component } from 'angular2/core';

@Component ({
    selector: 'el-events',
    templateUrl: 'app/events/event-list.component.html'
})

export class EventListComponent {
    pageTitle: string = 'Events List';
}

import { Component } from 'angular2/core';
import { EventListComponent } from './events/event-list.component';

@Component({
    selector: 'events-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <el-events></el-events>
    </div>`,
    directives: [ EventListComponent ]
})

export class AppComponent {
    pageTitle: string = 'Local Events App';
}
应该在AppComponent中呈现

import { Component } from 'angular2/core';

@Component ({
    selector: 'el-events',
    templateUrl: 'app/events/event-list.component.html'
})

export class EventListComponent {
    pageTitle: string = 'Events List';
}

import { Component } from 'angular2/core';
import { EventListComponent } from './events/event-list.component';

@Component({
    selector: 'events-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <el-events></el-events>
    </div>`,
    directives: [ EventListComponent ]
})

export class AppComponent {
    pageTitle: string = 'Local Events App';
}
UPD Index.html

<!DOCTYPE html>
<html>

<head>
    <title>Local Events App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="app/app.component.css" rel="stylesheet" />

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>

<body>
    <events-app>
        Loading App...
    </events-app>
</body>

</html>


本地事件应用程序
System.config({
包：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'app/main'）
.then（null，console.error.bind（console））；
正在加载应用程序。。。
事件列表.component.html

<div class 'panel panel-primary'>
    <div class='panel-heading'>
        {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'></div>
            <div class='col-md-4'>
                <input type="text" />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Search by: </h3>
            </div>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table'>
            <thead>
                <tr>
                    <th>
                        <button class='btn btn-primary'>
                            Show image
                        </button>
                    </th>
                    <th>Event</th>
                    <th>Code</th>
                    <th>Date</th>
                    <th>Fee</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

<div class 'panel panel-primary'>


{{pageTitle}}
搜索人：
显示图像
事件
代码
日期
费用
评级

您的事件列表.component.html中缺少
=


<div class 'panel panel-primary'>
    <div class='panel-heading'>
        {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'></div>
            <div class='col-md-4'>
                <input type="text" />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Search by: </h3>
            </div>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table'>
            <thead>
                <tr>
                    <th>
                        <button class='btn btn-primary'>
                            Show image
                        </button>
                    </th>
                    <th>Event</th>
                    <th>Code</th>
                    <th>Date</th>
                    <th>Fee</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>



<div class 'panel panel-primary'>






应该是


<div class='panel panel-primary'>





您的事件列表.component.html中缺少
=


<div class 'panel panel-primary'>
    <div class='panel-heading'>
        {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'></div>
            <div class='col-md-4'>
                <input type="text" />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Search by: </h3>
            </div>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table'>
            <thead>
                <tr>
                    <th>
                        <button class='btn btn-primary'>
                            Show image
                        </button>
                    </th>
                    <th>Event</th>
                    <th>Code</th>
                    <th>Date</th>
                    <th>Fee</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>



<div class 'panel panel-primary'>






应该是


<div class='panel panel-primary'>





您的事件列表组件html是什么样子的？似乎您遗漏了一些标记。@MadhuRanjan就是这样-您可以显示index.html吗？在
事件列表.component.html中添加代码。
@MadhuRanjan已添加！如果需要，我还可以让您访问我的项目…您的事件列表组件html是什么样子的？似乎您遗漏了一些标记。@MadhuRanjan就是这样-您可以显示index.html吗？在
事件列表.component.html中添加代码。
@MadhuRanjan added！如果需要的话，我也可以让你访问我的项目…你是一个向导！非常感谢。这个愚蠢的C9云IDE不验证HTMLhuh@yurzui鹰眼！你是个巫师！非常感谢。这个愚蠢的C9云IDE不验证HTMLhuh@yurzui鹰眼！