angular数据绑定

1，插值绑定{{}}

例如:

<h4 class="pull-right">{{product.price}}元</h4>

2,属性绑定[]

例如：

TS：public imgUrl:string = "http://placehold.it/320x150";

html：<img [src]="imgUrl" alt="#">

3、父子界面传值绑定

父html：

<div>
  <app-stars [rating]="product.rating"></app-stars>
</div>

子TS：

export class StarsComponent implements OnInit {

//传值指示
  @Input()
  public rating:number = 0;
  public stars: boolean[];
  constructor() { }

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

子html：

<p>
  <span *ngFor="let star of stars" class="glyphicon-star"
        [class.glyphicon-star-empty]="star"></span>
  <span>{{rating}}星</span>
</p>