Angular 2 parsing template error

问题

I'm new to angular 2, and I'm using angular-rc-4 version.

When I combine angular 2 with bootstrap icon, the template can't be parsed.

Unexpected closing tag "li"

Thanks for your help

Below is my code:

import { Component } from '@angular/core';
import { CourseService } from './course.service';
import { AutoGrowDirective } from './auto-grow.directive';

@Component({
    selector: 'courses',
    template: `
        <h2>Courses</h2>
        {{ title }}
        <input autoGrow [(ngModel)]="title"/>
        <input type="button" (click)="title = ''" value="Clear">
        Preview
        {{ title }}
        <ul>
            <li *ngFor="let course of courses">
                <i class="glyphicon glyphicon-star" />
            </li>
        </ul>

        <div (click)="onDivClick()">
            <button class="btn btn-primary" [class.active]="isActive" (click)="onClick($event)">Create</button>
        </div>
        `,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title = 'The title of courses page';
    courses: string[];
    isActive = true;

    constructor(courseService: CourseService) {
        this.courses = courseService.getCourses();
    }

    onClick($event){
        $event.stopPropagation();
        console.log('Clicked', $event);
    }
    onDivClick($event){
        console.log('On Div Clicked', $event);
    }
}

回答1:

i tag isn't self closing tag, you have to close it manually. You forgot to close <i> tag which is messing up with li as well & confusing ngFor directive where li has ended.

Template

<ul>
    <li *ngFor="let course of courses">
        <i class="glyphicon glyphicon-star"></i>
    </li>
</ul>

回答2:

Self-closing elements are not correctly parsed by Angular 2 and not planned on be implemented.

That's why you have to close all tags correctly:

<li *ngFor="let course of courses">
    <i class="glyphicon glyphicon-star"></i>
</li>

From the Github Issue:

we considered many options are here is the conclusion:

the default html parser will throw if it comes across a custom element that is self-closing or missing closing-tag

in the future we will make it easy to use custom template parsers that can support self-closing custom elements

reasoning:

current angular html templates are valid html5 fragments (even after the case-sensitivity change, they will be valid html5, but with higher fidelity)

custom element spec currently doesn't allow custom elements to be self-closing or void

we should not deviate from standards

we care about usability though and that's why we'll make it possible to author templates in other syntaxes (e.g. xhtml5, custom stuff, jade, whatever)

we don't want to rush the decision on the default behavior since we are under beta pressure. relaxing this rule in the (near) future even for the default parser is possible without a breaking change (the reverse is not)

来源：https://stackoverflow.com/questions/38244639/angular-2-parsing-template-error

标签

twitter-bootstrap-3

typescript

angular

angular2-template