NgFor是一个内置的模板指令,它使得迭代数组或对象之类的东西变得很容易,并为每个项创建一个模板。
<$>[注]这篇文章涵盖了角度2及以上<$>
下面是一个基本的用法示例:
1<ul>
2 <li *ngFor="let user of users">{{ user.name }}</li>
3</ul>
这将输出如下所示的html:
1<ul>
2 <li>Al Dente</li>
3 <li>D. Liver</li>
4 <li>Pepe Roni</li>
5</ul>
- 允许用户创建可在模板中使用的局部变量。
- 的用户意味着我们将迭代应该在我们的组件中可用的用户可迭代。
NgFor前的* 字符创建父模板。这是以下语法的快捷方式:TEMPLATE=
NG FOR LET Item of Items
。
可用的局部变量
您还可以为以下导出值设置局部变量:INDEX、FIRST、LAST、EVEN和ODD。Index将返回当前循环索引,其他值提供一个布尔值来指示值是真还是假。例如:
1<ul>
2 <li *ngFor="let user of users; let i = index; let odd = odd"
3 [class.odd]="odd">
4 {{i + 1}}. {{ user.name }}
5 </li>
6</ul>
将生成以下标记:
1<ul>
2 <li>1. Al Dente</li>
3 <li class="odd">2. D. Liver</li>
4 <li>3. Pepe Roni</li>
5</ul>