在ngb-rating模块中获取平均速率

时间:2019-07-15 14:06:15

标签: html angular ng-bootstrap

我想在Angular组件中保留所有评分的平均费率,但是我不知道如何做到这一点。我正在使用Bootstrap文档研究Angular,但这确实没有帮助。

这是模板rating.ts文件:

    import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-rating-template',
  templateUrl: './rating-template.html',
  styles: [`
    .star {
      font-size: 1.5rem;
      color: #b0c4de;
    }
    .filled {
      color: #1e90ff;
    }
    .bad {
      color: #deb0b0;
    }
    .filled.bad {
      color: #ff1e1e;
    }
  `]
})
export class NgbdRatingTemplate {
  average = 0;
  count = 0;
  currentRate = 6;

  avg() {
    this.average = (this.average*this.count + this.currentRate) / (this.count + 1);
    this.count += 1;
  }
}

以及HTML文件:

<ngb-rating [(rate)]="currentRate" (rateChange)="avg()">
  <ng-template let-fill="fill" let-index="index">
    <span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
  </ng-template>
</ngb-rating>
<hr>
<pre>Rate: <b>{{currentRate}}</b></pre>
<div> {{average}} </div>

但这不是我想要的,因为它仅适用于费率变化。

我需要您的建议,我不必使用ngb-rating模块btw,如果您对评分有更好的想法,我会很高兴学习这些。

0 个答案:

没有答案