Angular 循环渲染元素与数据

  Angular 中可以通过 ngFor 指令来循环渲染元素或者数据到页面上。

项目准备

  有如下项目目录结构：

  在 app.component.css 文件中输入如下样式代码：

ul{
  padding: 0;
  margin: 0;
}
ul li{
  display: inline-block;
  margin: 0 5px;
}
a{
  text-decoration: none;
}

无索引渲染

  在 app.component.ts 文件中定义一个数组或者可遍历的变量 tabs：

export class AppComponent {
  tabs = ['首页', '男装', '手机'];
}

  在 app.component.html 文件中输入如下代码：

<ul>
  <li *ngFor="let item of tabs"><a href="#">{{item}}</a></li>
</ul>

此处 *ngFor 是 Angular 中循环渲染的指令，let item of tabs 表示定义一个 item 变量，其值来源于 tabs 中的循环遍历子集，在元素中我们就可以通过 {{item}} 来将数据渲染到页面中了。

获取索引渲染

  如果需要关注循环的每一项的索引，那么可以在指令中加上一句 let key=index; ，关键变量为 index ，如下所示：

<ul>
  <li *ngFor="let item of tabs;let key=index;"><a href="#">{{key}}:{{item}}</a></li>
</ul>

  效果如下：

获取第一个元素与最后一个元素

  在循环渲染中可以使用 first 变量获取第一个元素，使用 last 获取最后一个元素，其值为 bool 类型，用法如 let f=first; 。

<ul>
  <li *ngFor="let mune of menus;let f=first;let l=last;">
    <a href="#">{{mune.title}}(第一个元素{{f}}，最后一个元素{{l}})</a>
  </li>
</ul>

获取第奇数个元素与第偶数个元素

  可以通过 odd 获取第奇数个元素，通过 even 获取第偶数个元素，其值为 bool 类型，用法如 let o=odd; ，因为程序中第一个元素的索引为 0 所以第一个元素为偶数。

<ul>
  <li *ngFor="let mune of menus;let o=odd;let e=even;">
    <a href="#">{{mune.title}}(第奇数个元素{{o}}，第偶数个元素{{e}})</a>
  </li>
</ul>