admin 管理员组

文章数量: 887021

Angular

前言

学习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

谢谢您的阅读！

本文标签： Angular

版权声明：本文标题：Angular 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687705531h131417.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。