角度 4 - 从 firebase 动态读取数组

Question

我正在为我的商店中的产品创建评论。我的问题是我有按钮和单击事件来保存数据库上的评论，稍后我想阅读这些评论并计算该产品的评分。我的函数 averageRate 运行不正常，我发现当我想阅读所有评论和地图评分值时，我没有得到我添加的最后一个，如何解决这个问题？

未在产品对象上创建评论时

当我单击按钮为没有任何评论的产品添加评论时，我没有错误，但它没有动态显示在 component.html 上列出（我必须重新加载）

什么时候至少有一条评论

当我点击评论被动态添加到评论列表但没有上传平均评分和评分数组时，我不知道该怎么做。

export class ProductReviewsComponent implements OnInit {
  @Input("product") product: Product;
  currentRate = 0; // display selected stars
  review = {};
  reviews = {};
  description: string; 
  product$; 
  userSubscription: Subscription;
  appUser: AppUser;
  key: any[] = []; // review array of object
  ratingTotal;
  items: number; // length
  sum: number; // sum
  average = 0;
  rates;

  constructor(
    config: NgbRatingConfig,
    private auth: AuthService,
    private reviewService: ReviewsService
  ) {
    config.max = 5;
    this.auth.appUser$.subscribe(appUser => (this.appUser = appUser));
  }

  async ngOnInit() {
    if(this.product.reviews) {

     this.product$ = await this.reviewService.getReview(this.product.$key); // display reviews
     this.key = Object.values(this.product.reviews ? this.product.reviews : []) // get array of reviews object
     this.items = this.key.length; 
     this.rates = this.key.map(item => item.rate); // get rate array of $values
     this.sum = this.rates.reduce(this.total); // sum rates 
     this.average = this.averageRating(); // count average
    }

  }

  averageRating() {
    return this.sum / this.items;
  }

  private total(total, num) {
    return total + num;
  }

  // button click event
  addReview() {
    let review = {
      rate: this.currentRate,
      description: this.review
    };

    // I want after click to update array of reviews and count new average

    this.reviewService.saveReview(this.product.$key, review); // 

  /*  from review.service method to save review on db
    saveReview(id, review) {
    return this.db.list("/products/" + id + '/reviews/').push(review);
 } */

  }
}

component.html

<form #f="ngForm">
  <div class="form-group">
    <ng-template #t let-fill="fill">
      <span *ngIf="fill === 100" class="star full">&hearts;</span>
      <span *ngIf="fill === 0" class="star">&hearts;</span>
      <span *ngIf="fill < 100 && fill > 0" class="star">
        <span class="half" [style.width.%]="fill">&hearts;</span>&hearts;
      </span>
    </ng-template>

    <ngb-rating [(rate)]="currentRate" [starTemplate]="t" [readonly]="false" max="5"></ngb-rating>


    <div class="form-group">
      <textarea #item #description="ngModel" [(ngModel)]="review.description" name="description" maxlength="255" type="text" class="form-control"
        placeholder="Dodaj opis..." required></textarea>
      <span>Zostało {{255 - item.value.length}} znaków</span>
      <div class="alert alert-danger" *ngIf="description.touched && description.invalid">
        <div *ngIf="description.errors.required">Name is required</div>
      </div>
    </div>
  </div>

  <button (click)="addReview()" [disabled]="!appUser || currentRate === 0" class="btn btn-primary">Dodaj opinię</button>
  <ng-container *ngIf="items > 0">
    <div *ngFor="let review of product$ | async">
      <ngb-rating [(rate)]="review.rate" [readonly]="true"></ngb-rating> {{review.rate}}

      <p>{{ review.description.description }}</p>

    </div>
  </ng-container>
  <button *ngIf="items > 3">load more</button>

</form>

Answer 1

我解决了这个问题，效果很好

我添加了 ngOnChanges 实现和 eureka！

ngOnChanges() {
    if(this.product.reviews) {
      this.product$ = this.reviewService.getReview(this.product.$key);
      this.key = Object.values(this.product.reviews ? this.product.reviews : [])
      this.items = this.key.length;
      this.rates = this.key.map(item => item.rate);
      this.sum = this.rates.reduce(this.total);
      this.average = this.averageRating();
     }
  }