[英]Angular2: template work, but templateUrl not
I want to put the html content in files, to be more easy to understand. 我想将html内容放在文件中,以便更容易理解。 I have this:
我有这个:
import { Component, OnInit } from '@angular/core';
import { CommentService } from '../services/Comment';
import { Comment } from '../class/Comment';
@Component({
template: '<ul class="comments"><li *ngFor="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul>',
providers: [CommentService]
})
export class CommentsComponent implements OnInit {
Comments_array: Comment[];
constructor(private commentService: CommentService) { }
ngOnInit() {
this.commentService.get_all_comments().subscribe(
(data) => {
this.Comments_array = data;
console.log ( this.Comments_array );
},
(error) => {
console.error(<any>error);
});
}
}
In this moment, works great, but if I change template in templateUrl: 'template/comments' 在这一刻,效果很好,但如果我在templateUrl中更改模板:'template / comments'
and template/comments have: 和模板/评论有:
<ul class="comments"><li *ngFor="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul
// same thing.. // 一样..
I get these errors: 我收到这些错误:
window.controllers is deprecated. Do not use it for UA detection.nsHeaderInfo.js:412:8
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.core.umd.js:241:9
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129platform-browser.umd.js:1909
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129platform-browser.umd.js:1900:17
STACKTRACE:platform-browser.umd.js:1900:17
resolvePromise@http://localhost/node_modules/zone.js/dist/zone.js:538:32
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost/node_modules/zone.js/dist/zone.js:426:22
platform-browser.umd.js:1900:17
Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129 ; Zone: angular ; Task: Promise.then ; Value: Object { message: "Template parse errors: Unexpected c…", stack: "BaseException$1@http://localhost/no…" }zone.js:461:14
Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129
Stack trace:
resolvePromise@http://localhost/node_modules/zone.js/dist/zone.js:538:32
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost/node_modules/zone.js/dist/zone.js:426:22
zone.js:463:10
I should change in UTF-8 or something? 我应该改用UTF-8或其他东西?
Error stacktrace clearly said that its template parsing error, where you had missed to close ul
tag. 错误stacktrace清楚地说它的模板解析错误,你错过了关闭
ul
标签。
You have to close the ul
element as Angular 2 check strict HTML parsing while having template inside html
file. 你必须关闭
ul
元素,因为Angular 2检查严格的HTML解析,同时在html
文件中有模板。
template/comments.html 模板/ comments.html
<ul class="comments">
<li *ngFor="let comment of Comments_array">
<h3>{{comment.text}}</h3>
<span>{{comment.author}}</span>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.