Question

我是角度2的新手，我使用节点npm来运行angular.Without循环工作安静好。我收到'意外结束标签“li”（“在编译时在浏览器中'。 have tried this but not working

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。

因为你正在使用角度测试版，它应该是

<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 - 而不是关闭它。您在结束标记中遗漏了/。在关闭h2之前，您实际上需要关闭两个li元素。

Answer 3

您使用的是已弃用的angular2版本，请更新为RC4。由于角度预编译html，如果你有任何结束标记错过也会导致错误

Angular2意外结束标记“li”

3 个答案: