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，因此如果缺少任何結束標記，也會導致錯誤