*ngFor 在空数组中显示元素

*ngFor shows element in empty array

本文关键字：显示 元素 数组 ngFor      更新时间：2023-09-26

关注 *ngFor 

<ul>
  <li *ngFor="#todo of todoService.todos">
    {{todo}}
  <li>
</ul>

其中 todoService 是注入的接口

import {Injectable} from 'angular2/core';
@Injectable()
export class TodoService {
    todos = []
}

当我加载页面时，输出是<li></li>而不是没有。

知道为什么吗？由于数组为空，因此不应有<li> -tag

编辑当我用值初始化数组时也会发生这种情况。总是无缘无故地有一个尾随的空元素。

编辑2问题示例https://plnkr.co/edit/MRYC4MHtlDLfBMUPsL6o?p=preview

啊，

是的:)你可以盯着这样的问题，即使解决方案有时太简单了。

我相信您希望底部<li>成为结束标签？这可能只是解决您的问题：

<ul>
  <li *ngFor="#todo of todoService.todos">
    {{todo}}
  </li>  <!-- this nagger right here -->
</ul>

我无法重现您对 beta1 的问题：

@Component({
  selector: 'my-app', 
  template: `
    <div>
      Test:
      <ul>
        <li *ngFor="#l of service.list">{{l}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  constructor(private service:Service) {
  }
}

请看这个 plunkr： https://plnkr.co/edit/hGpCIZQghtMBbpplV9tV?p=preview。

你使用的是哪个版本的 Angular2？

蒂埃里

相关文章：