2016-08-05 10 views
1

Ich möchte den HTML-Inhalt in Dateien legen, um leichter zu verstehen. Ich habe dies:Angular2: Vorlage arbeiten, aber templateUrl nicht

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 diesem Moment funktioniert gut, aber wenn ich Vorlage ändern in templateUrl: 'template/Kommentare'

und template/Anmerkungen:

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

// gleiche Sache ..

Ich bekomme diese Fehler:

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 ->]"): [email protected]: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 ->]"): [email protected]:129platform-browser.umd.js:1900:17 

STACKTRACE:platform-browser.umd.js:1900:17 

[email protected]://localhost/node_modules/zone.js/dist/zone.js:538:32 
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:323:20 
NgZoneImpl/this.inner<[email protected]://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:322:20 
Zone</Zone</[email protected]://localhost/node_modules/zone.js/dist/zone.js:216:25 
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:356:24 
NgZoneImpl/this.inner<[email protected]://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:355:24 
Zone</Zone</[email protected]://localhost/node_modules/zone.js/dist/zone.js:256:29 
[email protected]://localhost/node_modules/zone.js/dist/zone.js:474:26 
ZoneTask/[email protected]://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 ->]"): [email protected]:129 ; Zone: angular ; Task: Promise.then ; Value: Object { message: "Template parse errors: Unexpected c…", stack: "[email protected]://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 ->]"): [email protected]:129 
Stack trace: 
[email protected]://localhost/node_modules/zone.js/dist/zone.js:538:32 
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:323:20 
NgZoneImpl/this.inner<[email protected]://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:322:20 
Zone</Zone</[email protected]://localhost/node_modules/zone.js/dist/zone.js:216:25 
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:356:24 
NgZoneImpl/this.inner<[email protected]://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36 
Zone</ZoneDelegate</[email protected]://localhost/node_modules/zone.js/dist/zone.js:355:24 
Zone</Zone</[email protected]://localhost/node_modules/zone.js/dist/zone.js:256:29 
[email protected]://localhost/node_modules/zone.js/dist/zone.js:474:26 
ZoneTask/[email protected]://localhost/node_modules/zone.js/dist/zone.js:426:22 
zone.js:463:10 

Ich sollte in UTF-8 oder etwas ändern?

Antwort

3

Fehler Stacktrace deutlich gesagt, dass seine Vorlage Parsing-Fehler, wo Sie verpasst haben, ul Tag zu schließen.

Sie müssen die ul Element als Angular 2 überprüfen strikte HTML-Analyse während Vorlage in html Datei.

template/comments.html

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

Was meinen Sie? –

+0

Ich habe 'template/comments.html' bereits in meiner Antwort. –

+0

kein Problem, das ist ein neues für mich .. Ich habe nie diese Fehler auf eckig1. –

Verwandte Themen