Angular--*ngFor

偏执的太偏执、 2021-09-27 08:00 271阅读 0赞

# 前言 #

学习AngularJS，有一个语法是必不可少的，就是`*ngFor`，这篇博客就是对`*ngFor`总结一下。

# 内容 #

在Angular中，我们经常用到`*ngFor`指令来显示数组中每一项的信息，`*ngFor`的具体使用语法如下：

<div *ngFor="let product of products | filter:'title': keyword" class="col-md-4 col-sm-4 col-lg-4"> <div class="thumbnail"> <img [src]="imgUrl"> <div class="caption"> <h4 class="pull-right">{ { product.price}}元</h4> <h4><a [routerLink]="['/product',product.id]">{ { product.title}}</a></h4> <p>{ { product.desc}}</p> </div> <div> <app-stars [rating]="product.rating"></app-stars> </div> </div> </div> { { product.price}} 查值表达式 <img[src]="imgUrl"> 属性绑定

使用`*ngFor`来更新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 sth. of sth.s,的语法迭代数据中的每一项，这样我们可以获得如下值：

> `first`: boolean - 若当前项是可迭代对象的第一项，则返回 true
> 
> `last`: boolean - 若当前项是可迭代对象的最后一项，则返回 true
> 
> `even`: boolean - 若当前项的索引值是偶数，则返回 true
> 
> `odd`: boolean - 若当前项的索引值是奇数，则返回 true

上面简单介绍了\*ngFor，我们可以发现Angular中还有好多类是的语法：`*ngIf`、`*ngSwitchCase`等等，这都是相似的语法。

# 总结 #

要学的知识太多，我们需要不断的努力总结，谢谢那些让我们成长的巨人，让我们不断成长。

# end #

谢谢您的阅读！