Angular2意外的结束标签“ li”

Question

我是angular 2的新手，我正在使用节点npm来运行angular。而无需循环运行即可。 我得到“意外的结束标记‘礼’（“”在浏览器在编译时， 都试过，但不工作

import {Component} from 'angular2/core';

    @Component({
        selector: 'test',
        template: `<ul>
<li *ngFor="let carPart of carparts">
    <h2>{{carPart.name}}</h2>
        <h2>{{carPart.description}}</h2>
        <h2>{{carPart.inStock}} in Stock</h2>
            </li>
    </ul>`
    })
    export class AppComponent {
        carparts = [
        {
            "id": 1,
            "name": "Super Tires",
            "description": "These tires are the very best",
            "inStock": 5
        },
        {
            "id": 2,
            "name": "Reinforced Shocks",
            "description": "Shocks made from kryptonite",
            "inStock": 4
        }];
    }

Thanks in advance

Answer 1

你的问题在这里

<h2>{{carPart.name}}<h2>

它应该是：

<h2>{{carPart.name}}</h2>

你也使用错误的变量名

<li *ngFor="let carPart of carParts">

在您的课堂上使用carparts 。

并且由于您使用的是Beta版本，

<li *ngFor="#carPart of carparts">

自beta17起，您只能使用let 。 另请参阅更多信息：

• https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28

在声明局部变量的结构指令（例如* ngFor）中，不建议使用＃...。 使用let代替。 现在变成

Answer 2

我认为您的错误就在这里：

<h2>{{carPart.name}}<h2>

您不小心打开了h2而不是将其关闭。 您在结束标记中缺少/ 。 实际上，您在关闭li之前需要先关闭两个h2元素。

Answer 3

您使用的angular2版本已过时，请更新为RC4。 由于angular会预先编译html，因此如果缺少任何结束标记，也会导致错误