美文网首页
10.实战(star组件1)

10.实战(star组件1)

作者: Monee121 | 来源:发表于2018-03-01 17:00 被阅读0次

    步骤1:star.html

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

    步骤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:父组件模板 属性绑定

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

    相关文章

      网友评论

          本文标题:10.实战(star组件1)

          本文链接:https://www.haomeiwen.com/subject/hpqnxftx.html