angular 2 中的独立 ng-for？

Question

是否可以让 ng-for 不附加到任何元素？

例如，假设我有一个 foo 对象列表，这些对象本身包含 bars。然后我想遍历 foos 和 bars 而不是嵌套它们。

许多其他框架以这样的（假设的）方式支持它：

<table>
{% for foo in foos %}
  <tr>first level tr</tr>
  {% for bar in foo.bars %}
    <tr>same level as above tr</tr>
  {% endfor %}
{% endfor %}
</table>

但是在 angular 中，您必须将 ng-for 附加到实际元素上，或者您可以制作与上面类似的东西吗？

Answer 1

好消息：这是可能的。坏消息：现在你必须使用 canonical form of *ng-for 来实现这个：

<template ng-for #foo [ng-for-of]="foos">
  Put your template here
</template>

以后可以这样写（见this github issue）：

<template *ng-for="#foo from foos">
  Put your template here
</template>

但尚未实施。

所以，现在您的示例看起来像（请参阅 this plunker）：

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

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `
    <table>
      <template ng-for #foo [ng-for-of]="foos">
        <tr><td>first level tr</td></tr>
        <template ng-for #bar [ng-for-of]="foo.bars">
          <tr><td>same level as above tr</td></tr>
        </template>
      </template>
    </table>
  `
})
export class App {
  constructor() {
    this.foos = [
      { bars: ['bar1', 'bar2', 'bar3'] },
      { bars: ['some1', 'some2', 'some3'] }
    ]
  }
}

Answer 2

关心，现在改了：

SELECTORS [ngFor][ngForOf]
<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>

https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

angular 2 中的独立 ng-for？

A standalone ng-for in angular 2?

angular