Angular--*ngFor

最新推荐文章于 2025-05-12 09:44:06 发布

罗俊-Everns

最新推荐文章于 2025-05-12 09:44:06 发布

阅读量7.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： B/S----------------------- Angular AngularJS 文章标签： Angular

本文链接：https://blog.csdn.net/Luojun13Class/article/details/81900882

B/S----------------------- 同时被 3 个专栏收录

92 篇文章

订阅专栏

Angular

18 篇文章

订阅专栏

AngularJS

18 篇文章

订阅专栏

本文介绍AngularJS中*ngFor指令的基本用法及实例展示，包括如何迭代数组并显示每一项的数据，同时讲解了*ngFor中的特殊属性如first、last等，帮助读者更好地理解和运用这一关键语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

学习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等等，这都是相似的语法。