10.实战(star组件1)

步骤1:star.html

{{rating}}星

步骤2:星星组件

export class StarsComponent implements OnInit {
  @Input()
  private rating:number= 0;//接收父组件传过来的等级
  constructor() { }
  private stars: Boolean[];
  ngOnInit() {
    this.stars=[];
    for(let i =1;i<=5; i++){
      this.stars.push(i>this.rating); //push数组的末尾添加新的元素
    }
  }
}

步骤3:父组件模板 属性绑定

 

你可能感兴趣的:(10.实战(star组件1))