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 指令。

Angular *NgFor - angular 基础教程相关推荐

Angular 基础教程（7.0）
课程亮点按照初学者的学习路线规划内容所有代码均采用 Angular 7.0 版本覆盖日常开发中使用频率最高的特性 To B.To C 型界面,移动端 PWA 全面覆盖附赠 3 个附录,对比 5 ...
Angular 初学者快速上手教程
课程介绍本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件.路由.模块,加上业务开发过程中必须用到的特性:工具.指令.表单.RxJS.i ...
Angular 4 依赖注入教程之一依赖注入简介
目录 Angular 4 依赖注入教程之一依赖注入简介 Angular 4 依赖注入教程之二组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 ...
angular框架简介基础与使用（全文2w8字）前端框架angular
写在前面本文的所有内容,可以在我的博客上看到,下面是地址.建议去博客看,因为csdn的这篇图片我没上传. 可以转载,但请注明出处我的博客-点击跳转 https://numbrun.gitee.io ...
使用Angular Router导航基础
名称简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...
AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
AngularJs 基础教程 —— 依赖注入
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
AngularJs 基础教程 —— 控制器
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- 控制器 AngularJS 控制器A ...

Angular *NgFor - angular 基础教程

使用 ngFor 指令

更新 MailService 服务

更新 AppComponent 组件

Angular *NgFor - angular 基础教程相关推荐

最新文章

热门文章