Question

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

例如，假设我有一个foo对象列表，它们自己包含条形码。然后我想遍历foos和bar，而不是嵌套它们。

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

<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>

但是在角度方面，你必须将ng-for附加到一个实际的元素上，或者你可以制作类似于上面的东西吗？

Answer 1

好消息：这是可能的。坏消息：目前您必须使用canonical form *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

角度2的独立ng-for？

2 个答案: