Как я могу рассчитать среднее значение в angular?

Question

Я пытаюсь добавить информацию о среднем количестве отзывов, когда люди просматривают количество звезд, а затем подсчитывают, что mov ie имеет это среднее количество звезд. Я не знаю, как получить свой средний счет в html.

Вот мой HTML файл:

<div *ngFor="let movie of movieData">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Reviewer</th>
        <th>Stars</th>
        <th>Reviews</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let info of movie.reviews">
        <td>{{info.name}}</td>
        <td>{{info.stars}}</td>
        <td>{{info.comment}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Average rating: <b> {{avgRating}} </b></p>

мой компонент DetailsComponent:

export class DetailsComponent implements OnInit {
  @Input() avgRating: any;
  movieID: string;
  movieData: any;
  avg;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private httpService: HttpService
  ) {}

  ngOnInit() {
    this.movieID = this.route.snapshot.paramMap.get("id");
    this.getOneMovie();
  }

  getOneMovie() {
    let observable = this.httpService.oneMovie(this.movieID);
    observable.subscribe((data) => {
      this.movieData = data;
    });
  }
  getMovie(idx) {
    var sum = 0;
    for (var i = 0; i < this.movieData.reviews.length; i++) {
      sum += this.movieData.reviews[i].stars;
    }
    this.avg = sum / this.movieData.reviews.length;
  }
}

и моя модель. js file:

const ReviewSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, "Customer name is required"],
        minlength: [3, "Customer name must be a minimum of 3 characters"]
    },
    stars: {
        type: Number,
        required: [true, "Star is required"]
    },
    comment: {
        type: String,
        required: [true, "Review is required"],
        minlength: [3, "Review must be a minimum of 3 characters"]
    },
})

const MovieSchema = new mongoose.Schema({
    title: {
        type: String,
        required: [true, "Movie title is required"],
        minlength: [3, "Movie title must be a minimum of 3 characters"]
    },
    reviews: [ReviewSchema]
})

Кто-нибудь может помочь?

Answer 1

Здесь есть некоторые проблемы.

Сначала есть avgRating, определенный как вход:

@Input() avgRating: any;

, но не похоже, что он должен быть входом, если это вход, который вы не нужно его вычислять, а затем он отображается в шаблоне как то же значение, которое было получено в качестве входных.

С другой стороны, существует avg var, который должен иметь значение среднего. Но метод getMovie(), который выполняет математические вычисления для установки значения avg, похоже, никогда не вызывался.

Мне кажется более логичным избавиться от avgRating var и затем вызвать getMovie(idx) on getOneMovie() метод при выполнении обратного вызова подписки:

  getOneMovie() {
    let observable = this.httpService.oneMovie(this.movieID);
    observable.subscribe((data) => {
      this.movieData = data;
      getMovie(idx)
    });
  }

И используйте этот avg var в шаблоне:

<p>Average rating: <b> {{ avg }} </b></p>

Фактически параметр idx of getMovie(idx) кажется, что ни для чего не используется, поэтому вы также можете избавиться от этого параметра.

Answer 2

Если у Mov ie есть отзывы, вы можете рассчитать AVG, как только вы его получите. Например:

getOneMovie() {
let observable = this.httpService.oneMovie(this.movieID);
observable.subscribe((data) => {
  this.movieData = data;

  if (this.movieData.reviews != null && this.movieData.reviews.length > 0) {
    let sum = 0;
    this.movieData.reviews.forEach(review => sum += review.stars);
    this.avg = sum/this.movieData.reviews.length;
  } else {
    this.avg = 0; # Or whatever you want to show if there are no reviews for the movie
  }
});
}

Приведенный выше код проверяет, есть ли у mov ie хотя бы 1 просмотр, чтобы вычислить среднее значение, в противном случае он устанавливает среднее значение 0.

Затем в шаблон, который вы просто показываете с помощью

{{avg}}

Как упоминалось в @jeprubio, я бы удалил Input() и getMovie(idx), поскольку они не используются.

Наконец, имейте в виду что вы не инициализируете avg, и если getOneMovie() не работает по какой-либо причине, вы никогда не сможете установить для него число (что приведет к ошибкам в шаблоне).