1

Я новичок в угловом 2, и я использую версию углового rc-4.Угловая 2 ошибка шаблона анализа

Когда я совмещаю угловой 2 с иконкой начальной загрузки, шаблон не может быть разобран.

Неожиданное закрывающий тег "литий"

Спасибо за вашу помощь

Ниже мой код:

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

ответ

3

i тег не закрывающиеся теги, вы должны закройте его вручную. Вы забыли закрыть <i> тег, который испортил li, а также & запутанный ngFor директива, где li закончился.

Шаблон

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

пятна на. Единственные «самозакрывающиеся» теги (правильно известные как элементы void) соответствуют спецификации: https://www.w3.org/TR/html5/syntax.html#void-elements площадь, база, br, col , embed, hr, img, input, keygen, link, meta, param, source, track, wbr – LDJ

3

Самозакрывающиеся элементы не правильно разобран Angular 2 и not planned on be implemented.

Вот почему вы должны правильно закрыть все теги:

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

От Github Issue:

мы рассматривали много вариантов здесь является вывод:

  • HTML по умолчанию анализатор выбросит, если он приходит через пользовательский элемент, который самозакрывающийся или отсутствуют закрытие тег
  • в будущем будет легко использовать пользовательские шаблоны парсеров, которые могут поддерживать самозакрывающиеся пользовательские элементы

рассуждение:

  • текущие угловые шаблоны HTML являются допустимыми фрагментами html5 (даже после изменения индивидуальной чувствительности, они будут действовать html5, но с более высокой точностью )
  • пользовательский элемент спецификация в настоящее время не позволяет пользовательские элементам быть самозакрывающимися или недействительным
  • мы не должны отклоняться от стандартов
  • мы заботимся об удобстве использования, хотя, и именно поэтому мы сделаем это возможным автор шаблоны в других синтаксисах (например, xhtml5, custom материал, нефрит, что угодно)
  • Мы не хотим спешить с решением по умолчанию, так как мы находимся под бета-давлением.расслабляющий это правило в (ближайшем) будущий даже для синтаксического анализа по умолчанию можно без отключающих изменений ( обратного не)
+1

Хорошо пойманная и упомянутая нить github информативна, оценена +1 за ее использование :) –

Смежные вопросы