Angular *NgFor - angular 基础教程

转载自 http://www.ngui.cc/news/show-115.html

在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。

使用 ngFor 指令

更新 MailService 服务

import { Injectable } from '@angular/core'; 

@Injectable() 

export class MailService {
  messages: string[] = [ '天之骄子，加入修仙之路群', 'Shadows，加入修仙之路群', 'Keriy，加入修仙之路群' ];
}

更新 AppComponent 组件

import {Component} from '@angular/core'; 

import {MailService} from "./mail.service"; 

@Component({
  selector: 'app-root',
  template: `
    <h3>{{title}}</h3>
    <ul>
      <li *ngFor="let message of mailService.messages; index as i;">
        {{i}} - {{message}}
      </li>
    </ul>
  ` }) 

export class AppComponent {
  title = 'Hello, Angular'; 

 constructor(private mailService: MailService) {}
}

在 AppComponent 组件的模板中，我们使用 let item of items; 语法迭代数组中的每一项，另外我们使用 index as i 用来访问数组中每一项的索引值。除了 index 外，我们还可以获取以下的值：

• first: boolean - 若当前项是可迭代对象的第一项，则返回 true

• last: boolean - 若当前项是可迭代对象的最后一项，则返回 true

• even: boolean - 若当前项的索引值是偶数，则返回 true

• odd: boolean - 若当前项的索引值是奇数，则返回 true

需要注意的是，*ngFor 中的 * 号是语法糖，表示结构指令。因为该语法最终会转换成：

<ng-template ngFor let-item [ngForOf]="items" let-i="index"> <li>...</li> </ng-template>

除了 *ngFor 外，常用的结构指令还有 *ngIf、*ngSwitchCase 指令。