Angular 2解析模板错误 [英] Angular 2 parsing template error

问题描述

我是angular 2的新手，并且正在使用angular-rc-4版本.

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

当我将angular 2与bootstrap图标结合使用时，无法解析该模板.

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

意外的结束标记"li"

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

推荐答案

i标签不是自动关闭标签，您必须手动将其关闭.您忘记了关闭<i>标记，而该标记也弄乱了li和&标记.令人困惑的ngFor指令，其中li已结束.

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.

模板

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

这篇关于Angular 2解析模板错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！