10实战

目标：要实现的效果： image.png

步骤1：实现点击变实星星或空星星

star.html

<p>
  <span  *ngFor="let star of  stars;let i=index;" class="fa fa-star"
         [class.fa-star-o]="star" (click)="clickStar(i)" ></span> <!--点击星星把循环下标传过去-->
   <span>{{rating}}星</span>
</p>

star.ts

clickStar(index:number) { //index表示点击星星传进来的下标
      this.rating = index + 1; //点第一个星星，index0,想要第一个星星显示，所以加1.
      this.ngOnInit(); // 根据新的rating值将stars数组重新赋值

  }

效果图;

image.png

步骤2：只有评价的星星能点；添加评论功能；修改等级绑定，保存都是五颗星的问题
star.ts

 @Input()
  private readOnly:boolean = true;//默认都是只读

clickStar(index:number) { //index表示点击星星传进来的下标
    if(!this.readOnly) { //不是只读情况下，可编辑情况下，能点
      this.rating = index + 1; //点第一个星星，index0,想要第一个星星显示，所以加1.
      this.ngOnInit(); // 根据新的rating值将stars数组重新赋值
    }
  }

productDesc.ts（声明模板中需要用到的默认星等级和写的评论，以及添加评论方法）

 newRating:number = 5;// 评论区默认5颗星
  newComment:string ="";// 评价内容

addComment(){
    let comment = new Comment(1,this.product.id,  new Date().toLocaleDateString(),'someone',this.newRating,this.newComment);
    this.comments.unshift(comment); // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
  }

productDest.html(默认五颗星，能点)

 <div> <!--要双向绑定，所有需要星组件给父组件发射一个新的等级值。-->
  <app-stars  [rating]="newRating" [readOnly]="false"></app-stars> <!--星级绑定评论区星级，可编辑-->
  </div>
  <div>
    <textarea [(ngModel)]="newComment"></textarea>
  </div>
  <div>
    <button class="btn" (click)="addComment()">提交</button><!--点击按钮，增加新的评论-->
  </div>

效果

image.png

步骤3（想子组件影响父组件，需要输出属性，star组件影响productDesc组件星级）

productDesc.html修改将rating双向绑定

<div> <!--要双向绑定，所有需要星组件给父组件发射一个新的等级值。-->
  <app-stars  [(rating)]="newRating" [readOnly]="false"></app-stars> <!--星级绑定评论区星级，可编辑-->
  </div>

star.ts

 @Output() // 必须是这个名字，输出属性名字是输入名字加上change，详情组件绑定可以用[(rating)]
  private ratingChange:EventEmitter<number> = new EventEmitter();

clickStar(index:number) { //index表示点击星星传进来的下标
    

      this.ratingChange.emit(this.rating);//将等级发出去，产品组件接收
  }

效果：

image.png

步骤4:隐藏展示评论模块
productDesc.ts

isCommentHidden =true;//默认情况下，隐藏

productDesc.html

 <div><button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发布评论</button> </div>
  <div [hidden]="isCommentHidden">



</div>

效果： image.png

步骤5：重新打开时要清空原有的评论；恢复默认5星级

addComment(){
  

   this.newComment=null; //评论空
   this.newRating=5;//星级5
   this.isCommentHidden=true; //隐藏
  }

image.png

解决上图问题:重新打开星星不符合显示的默认等级5，是未修改循环星星造成的。
输入属性rating改变得时候changes事件会触发

image.png

效果完成。恢复五星状态，输入属性改变的时候，star数组就跟着变。
步骤6：改变星级的时候，商品平均星级。点击提交触发，所以在提交评论方法里写。

productDesc.ts

 addComment(){


 let sum=this.comments.reduce((sum,comment)=> sum + comment.rating,0);//所有评论的和,reduce需要两个初始值，第一次调0，加第一个评论的星级，最后拿到所有的星级的和，
 this.product.rating = sum/this.comments.length;//得到一个平均的星级。

}