Angular2 模板解析错误 EOF
Angular2 Template Parse Errors EOF
在 Angular2 (beta 13) 中,我试图显示从数据库中检索到的数据项列表。这部分工作正常。
但是,当我尝试在 html table 中显示这些项目(应用程序名称)时,它不起作用。奇怪的是,它在列表中显示时确实有效。
错误信息
EXCEPTION: Template parse errors:
Unexpected character "EOF" ("
</table>
</div>
</div[ERROR ->]"): ApplicationsComponent@13:5
applications.html(导致上述错误)
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<table>
<tbody>
<tr *ngFor="#app of applications">
<td >
{{app.name}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
applications.html(工作无误)
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<ul>
<li *ngFor="#app of applications">
{{app.name}}
</li>
</ul>
</div>
</div>
boot.ts
///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import 'rxjs/Rx'; // kitchen sink
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
// Bootstrap the application and reference the required directives
bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
谢谢丹。
更新
这是我要显示的数据(首选应用程序):
[{"applicationID":1,"name":"Applications","description":"Web applications","applicationRef":"Applications","status":true,"icon":"fa fa-th-large","iconColour":"ffffff","applicationColour":"ffffff","routerLink":"Applications","applicationFeatures":null}, .... more here]
这是我的组件(几乎与有效的组件相同)。
有效的组件通过标签的方式包含在页面上,例如,而不起作用的是通过路由遍历提供的。
import {Component, OnInit} from 'angular2/core';
import {ApplicationVM} from '../ViewModels/Application.ViewModel';
import {ApplicationService} from '../Services/application.service';
@Component({
selector: 'ApplicationList',
templateUrl: './app/Applications/Components/applications.html',
providers: [ApplicationService]
})
export class ApplicationsComponent implements OnInit {
constructor(private _applicationService: ApplicationService) { }
errorMessage: string;
applications: ApplicationVM[];
ngOnInit() {
console.log("INIT");
this.getApplications();
}
listApps() {
this.getApplications();
}
getApplications() {
this._applicationService.getApplications()
.subscribe(
apps => this.applications = apps,
error => this.errorMessage = <any>error);
}
}
可能存在其他问题,因为它与 <table><tbody>
和 beta.13
一起使用
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<table>
<tbody>
<tr *ngFor="#app of users">
<td >
{{app.firstName}}
</td>
</tr>
</tbody>
</table>
</div>
更新:
似乎是浏览器 link 或 WebEssentials 实时更新的问题。重建 PC 没有问题(未安装 Web Essentials 且未更改其他设置)。
完整GitHub期post:
https://github.com/angular/angular/issues/7983
在 Angular2 (beta 13) 中,我试图显示从数据库中检索到的数据项列表。这部分工作正常。
但是,当我尝试在 html table 中显示这些项目(应用程序名称)时,它不起作用。奇怪的是,它在列表中显示时确实有效。
错误信息
EXCEPTION: Template parse errors:
Unexpected character "EOF" ("
</table>
</div>
</div[ERROR ->]"): ApplicationsComponent@13:5
applications.html(导致上述错误)
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<table>
<tbody>
<tr *ngFor="#app of applications">
<td >
{{app.name}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
applications.html(工作无误)
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<ul>
<li *ngFor="#app of applications">
{{app.name}}
</li>
</ul>
</div>
</div>
boot.ts
///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import 'rxjs/Rx'; // kitchen sink
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
// Bootstrap the application and reference the required directives
bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
谢谢丹。
更新
这是我要显示的数据(首选应用程序):
[{"applicationID":1,"name":"Applications","description":"Web applications","applicationRef":"Applications","status":true,"icon":"fa fa-th-large","iconColour":"ffffff","applicationColour":"ffffff","routerLink":"Applications","applicationFeatures":null}, .... more here]
这是我的组件(几乎与有效的组件相同)。 有效的组件通过标签的方式包含在页面上,例如,而不起作用的是通过路由遍历提供的。
import {Component, OnInit} from 'angular2/core';
import {ApplicationVM} from '../ViewModels/Application.ViewModel';
import {ApplicationService} from '../Services/application.service';
@Component({
selector: 'ApplicationList',
templateUrl: './app/Applications/Components/applications.html',
providers: [ApplicationService]
})
export class ApplicationsComponent implements OnInit {
constructor(private _applicationService: ApplicationService) { }
errorMessage: string;
applications: ApplicationVM[];
ngOnInit() {
console.log("INIT");
this.getApplications();
}
listApps() {
this.getApplications();
}
getApplications() {
this._applicationService.getApplications()
.subscribe(
apps => this.applications = apps,
error => this.errorMessage = <any>error);
}
}
可能存在其他问题,因为它与 <table><tbody>
和 beta.13
<div class="route-container route-container-margin-0 route-container-width-standard">
<div class="route-container-padding-standard">
<p>hello world</p>
<table>
<tbody>
<tr *ngFor="#app of users">
<td >
{{app.firstName}}
</td>
</tr>
</tbody>
</table>
</div>
更新:
似乎是浏览器 link 或 WebEssentials 实时更新的问题。重建 PC 没有问题(未安装 Web Essentials 且未更改其他设置)。
完整GitHub期post: https://github.com/angular/angular/issues/7983