Question

我想将html内容放在文件中，以便更容易理解。我有这个：

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);
        });  

    }
}

在这一刻，效果很好，但是如果我在 templateUrl中更改模板：'模板/评论'

和模板/评论有：

<ul class="comments"><li *ngFor="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul

//同样的事情..

我收到这些错误：

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

我应该更改UTF-8或其他什么？

Answer 1

错误stacktrace明确表示其模板解析错误，您错过了关闭ul标记。

您必须关闭ul元素，因为Angular 2会在html文件中包含模板时检查严格的HTML解析。

<强>模板/ comments.html

<ul class="comments">
   <li *ngFor="let comment of Comments_array">
     <h3>{{comment.text}}</h3>
     <span>{{comment.author}}</span>
   </li>
</ul>

Angular2：模板工作，但templateUrl没有

1 个答案: