添加评论功能

主要应用到知识点：组件间通讯

auction/src/app/product-detail/product-detail.component.html

@@ -15,6 +15,19 @@ <h4>{{product.title}}</h4>
 </div>
 
 <div class="well">
+    <div>
+        <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发表评论</button>
+    </div>
+    <div [hidden] = "isCommentHidden">
+        <div><app-stars [(rating)]="newRating" [readonly]="false"></app-stars></div>
+        <div>
+            <textarea [(ngModel)]="newComment"></textarea>
+        </div>
+        <div>
+            <button class="btn" (click)="addComment()">提交</button>
+        </div>
+    </div>
+
     <div class="row" *ngFor="let comment of comments">
         <hr>
         <div class="col-md-12">

auction/src/app/product-detail/product-detail.component.ts

@@ -13,6 +13,11 @@ export class ProductDetailComponent implements OnInit {
 
     comments: Comment[];
 
+    newRating:number =5;
+    newComment:string = "";
+
+    isCommentHidden = true;
+
     constructor(private routeInfo: ActivatedRoute,
                 private productService: ProductService) {
     }
@@ -24,4 +29,17 @@ export class ProductDetailComponent implements OnInit {
         this.comments = this.productService.getCommentsForProductId(productId);
     }
 
+    addComment(){
+        let comment = new Comment(0,this.product.id,new Date().toISOString(),"someone",this.newRating,this.newComment);
+        this.comments.unshift(comment);
+
+        //reduce方法需要两个参数(sum,comment) => sum + comment.rating 匿名回调，0 代表初始值
+        //循环comments数组中的所有元素，当第一次循环的时候sum=0，comment是数组中的第一个元素。sum + comment.rating作为返回值，作为下一次循环时的sum
+        let sum = this.comments.reduce((sum,comment) => sum + comment.rating,0);
+        this.product.rating =sum / this.comments.length;
+
+        this.newComment =null;
+        this.newRating = 5;
+        this.isCommentHidden = true;
+    }
 }

auction/src/app/product/product.component.ts

@@ -1,7 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ProductService, Product} from "../shared/product.service";
 import {FormControl} from "@angular/forms";
-// import {debounceTime} from "rxjs/add/operator/";
 import 'rxjs/Rx'
 
 @Component({

auction/src/app/stars/stars.component.html

@@ -1,6 +1,6 @@
 <p>
-  <span  *ngFor="let star of stars" class="glyphicon glyphicon-star"
-         [class.glyphicon-star-empty]="star"></span>
-  <span>{{rating}}星</span>
+  <span  *ngFor="let star of stars; let i=index;" class="glyphicon glyphicon-star"
+         [class.glyphicon-star-empty]="star" (click)="clickStar(i)" ></span>
+  <span>{{rating | number:'1.0-2'}}星</span>
 </p>
 

auction/src/app/stars/stars.component.ts

@@ -1,24 +1,43 @@
-import { Component, OnInit,Input} from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core';
 // import {start} from "repl";
 
 @Component({
-  selector: 'app-stars',
-  templateUrl: './stars.component.html',
-  styleUrls: ['./stars.component.css']
+    selector: 'app-stars',
+    templateUrl: './stars.component.html',
+    styleUrls: ['./stars.component.css']
 })
-export class StarsComponent implements OnInit {
+export class StarsComponent implements OnInit,OnChanges {
 
-  @Input()
-  private rating:number = 0;
+    @Input()
+    private rating: number = 0;
 
-  private stars:boolean[];
+    @Output()
+    private ratingChange: EventEmitter<number> = new EventEmitter();
 
-  constructor() { }
+    private stars: boolean[];
 
-  ngOnInit() {
-    this.stars = [];
-    for (let i = 1;i<=5;i++){
-      this.stars.push(i>this.rating);
+    @Input()
+    private readonly: boolean = true;
+
+    constructor() {
     }
-  }
+
+    ngOnInit() {
+
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.stars = [];
+        for (let i = 1; i <= 5; i++) {
+            this.stars.push(i > this.rating);
+        }
+    }
+
+    clickStar(index: number) {
+        if (!this.readonly) {
+            this.rating = index + 1;
+            this.ratingChange.emit(this.rating);
+        }
+    }
+
 }