Angular--*ngFor

前言

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

谢谢您的阅读！