Angular data 2

ngFor指令用法

1、在product.component.ts 文件中定义如下

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private products:Array;

  constructor() { }

  ngOnInit() {
    this.products = [
      new Product(1,'商品1',1.99,3.5,'第一个商品',['电子产品','硬件产品']),
      new Product(2,'商品2',2.99,4,'第二个商品',['电子产品']),
      new Product(3,'商品3',1.89,5,'第三个商品',['图书']),
      new Product(4,'商品4',1.33,4.5,'第四个商品',['电子产品','硬件产品']),
      new Product(5,'商品5',3.0,2.5,'第五个商品',['硬件产品']),
      new Product(6,'商品6',4.50,1.5,'第六个商品',['电子产品']),
    ];
  }

}


export class Product{
  constructor(
    public id:number,
    public title:string,
    public price:number,
    public rating:number,
    public desc:string,
    public categorys:Array
  ){

  }
}

2、在product.component.html模板文件中定义

  

    ![](http://upload-images.jianshu.io/upload_images/8620425-68d8d59b05470d62?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

      
{{product.price}}元
      
{{product.title}}
      
{{product.desc}}
    
    

      
    
  

属性绑定和样式绑定

1、属性绑定
在component中

private imgUrl = 'http://placehold.it/320x150';

在模板中

2、样式绑定
以星级评价组件为例（用方括号[class.样式名]=“用ngFor循环出来的绑定变量”）

stars.component.html中代码示例

stars.component.ts中代码示例

...
  private stars:boolean[];
...
  constructor() { }

  ngOnInit() {
    this.stars=[false,false,true,true,true];
...
  }

3、输入绑定（父组件product传递给子组件，�通过在子组件stars的变量上加@Input修饰符）

stars.component.html中代码示例

  
  {{rating}}星

stars.component.ts中代码示例

...
 @Input()
  private rating:number = 0;
  private stars:boolean[];
  constructor() { }

  ngOnInit() {
    this.stars=[];
    for(let i = 1;i<=5;i++){
      this.stars.push(i>this.rating);
    }

  }
...

父组件 product.component.html中代码示例

  

    
    

      
{{product.price}}元
      
{{product.title}}
      
{{product.desc}}