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

问题描述

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

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

<块引用>

意外的结束标记li"

感谢您的帮助

下面是我的代码:

import { Component } from '@angular/core';从'./course.service'导入{CourseService}；从 './auto-grow.directive' 导入 { AutoGrowDirective };@成分({选择器:课程"，模板:`<h2>课程</h2>{{ 标题 }}<input autoGrow [(ngModel)]="title"/><input type="button" (click)="title = ''" value="清除">预览{{ 标题 }}<ul><li *ngFor="let course of course"><i class="glyphicon glyphicon-star"/><div (click)="onDivClick()"><button class="btn btn-primary" [class.active]="isActive" (click)="onClick($event)">创建</button>

`，提供者:[课程服务]，指令:[AutoGrowDirective]})导出类 CoursesComponent {title = '课程页面标题';课程:字符串[]；isActive = 真;构造函数(课程服务:课程服务){this.courses = courseService.getCourses();}onClick($event){$event.stopPropagation();console.log('点击', $event);}onDivClick($event){console.log('On Div Clicked', $event);}}

解决方案

i 标签不是自关闭标签，您必须手动关闭它.你忘记关闭 <i> 标签，该标签也与 li 混淆了 &令人困惑的 ngFor 指令，其中 li 已结束.

模板

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

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

解决方案

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>

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