Angular2 ngFor产生额外的循环

hollycrab 发表于 Dev

蜀葵

我正在像这样在Angular 2 rc-1中使用ngFor：

@Component({
    selector: 'myList',
    template: `<h2>Menu</h2>
                {{title}}
                <ul>
                    <li *ngFor="let menu of menus">
                        {{menu }}
                    <li>
                </ul>`
})
export class MenuComponent {
    title:string = "Our lunch menu";
    menus= ["Menu 1", "Menu 2", "Menu 3"];
}

我面临的问题不是生成3个项目符号/列表，而是以4个项目符号结尾，最后一个项目符号没有任何文本。

有人可以知道为什么会发生这种情况，或者我犯了任何错误吗？

谢谢

帕迪普·贾恩（Pardeep Jain）

您的代码中有两个错误

~~1.您尚未导入CORE_DIRECTIVES组件~~如@Gunter在评论中所述，无需导入，CORE_DIRECTIVES因为默认情况下它们可作为PLATFORM_DIRECTIVES的一部分使用

为什么您的代码生成3个项目符号/列出它最终以4个项目符号结尾，而最后一个项目符号没有任何文本。因为在您的代码中没有结束标记，</li>所以请使用以下代码更改代码：
```
<ul>
  <li *ngFor="#menu of menus; #i=index">
   {{menu}} {{i}} {{menus.length}}
  </li>
</ul>
```

工作实例 Working example

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。