Angular 中的 * ngFor 指令

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>

See So

Published At
Categories with 技术
Tagged with
comments powered by Disqus