twitter-bootstrap-3 - Angular 2解析模板错误

Question

我是 angular 2 的新手，我使用的是 angular-rc-4 版本。

当我将 angular 2 与 bootstrap icon 结合使用时，无法解析模板。

Unexpected closing tag "li"

谢谢你的帮助

下面是我的代码:

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

Answer 1

i标签不是自动关闭标签，您必须手动关闭它。你忘了关<i>与 li 混淆的标签同样令人困惑ngFor指令在哪里 li已经结束了。

模板

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