Angular2：模板工作，但templateUrl沒有

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中更改模板：'template / comments'

和模板/評論有：

<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>