angular2中* ngFor的含义是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (71)

在下面的示例中,ngFor之前的含义是什么以及为什么需要它?

<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
</div>
提问于
用户回答回答于

当Angular在ngFor中看到星号(*)时,它将使用它的DOM元素作为模板来渲染循环。

<div *ngFor="#hero of heroes">
  {{ hero.name }}
</div>

相当于:

<template ngFor #hero [ngForOf]="heroes">
    <div>
       {{ hero.name }}
    </div>
</template>
用户回答回答于

ngFor只能应用于a <template>*ngFor是可应用于任何元素的简短形式,并且该<template>元素隐式地在场景后面创建。

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

句法

  • <li *ngFor="let item of items; let i = index">...</li>
  • <li template="ngFor let item of items; let i = index">...</li>
  • <template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

随着2.0.0最终版本的<ng-container>推出,它的行为就像<template>(一个实际上没有添加到DOM的包装器元素),但支持*ngFor="..."语法。

扫码关注云+社区

领取腾讯云代金券