Question

以下代码不起作用！如何在ng-for中进行ng-for！？

<ul *ng-for="#item of items">
    <li *ng-for="#task of item.tasks">{{task.title}}</li>
</ul>

Answer 1

其中一个可能的错误：您可能忘记在NgFor装饰器的CORE_DIRECTIVES属性中指定directives或View：

import {Component, View, NgFor} from 'angular2/angular2';

@Component()
@View({
  template: `...`,
  directives: [NgFor] // <- You might forgot to do this
})
export class SomeCompoennt { ... }

另见this plunker

UPD this your plunker

的问题

问题是p（段落元素）不能包含块元素。请参阅this。

P元素代表一个段落。它不能包含块级元素（包括P本身）。

因此浏览器会转换任何嵌套的p：

<p>
  <p>
    <p>
    </p>
  </p>
</p>

进入扁平结构：

<p></p>
<p></p>
<p></p>

所以代码：

<p *ng-for="#person of peopleService.people">
  {{person.name}}
  <table>
      <tr *ng-for='#hobby of person.hobbies'>
          <td>{{hobby}</td>
      </tr>
  </table>
</p>

将通过浏览器转换为：

<p *ng-for="#person of peopleService.people">
  {{person.name}}
</p>
<table>
  <tr *ng-for='#hobby of person.hobbies'>
    <td>{{hobby}</td>
  </tr>
</table>

在这种情况下，person当然是undefined。

如何在ng-for angularjs 2.0中进行ng-for？

1 个答案: