如何计算 angular 的平均值？

Question

I'm trying add average reviews info when people review number of stars and then it calculate that movie have that average stars. I don't know how to get my avg caluclate in html.

Here is my HTML file:

<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>

my DetailsComponent component:

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;
  }
}

and my model.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]
})

Could anybody help?

Answer 1

There are some issues here.

First there is avgRating defined as an input:

@Input() avgRating: any;

but it doesn't seem it should be an input, if it's an input you don't need to calculate it and then it's shown in the template as the same value that is get as the input.

On the other hand, there is an avg var which is supposed to have the value of the average. But the getMovie() method that does the maths to set the avg value seems not to be ever called.

What it seems more logical to me would be to get rid of avgRating var and then call getMovie(idx) on getOneMovie() method when the subscription callback is executed:

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

And use this avg var in the template:

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

Actually the idx parameter of getMovie(idx) seems not to be used for anything so you might also want to get rid of this parameter.

Answer 2

If a Movie has its reviews, you can calculate the AVG as soon as you get it. For example:

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
  }
});
}

The code above checks if the movie has at least 1 review in order to calculate the avg, otherwise it sets avg to 0.

Then in the template you just show it with

{{avg}}

As @jeprubio mentioned, I'd delete the Input() and getMovie(idx) as they are not being used.

Lastly, keep in mind that you are not initializing avg , and if getOneMovie() fails for any reason, you'll never get to set it to a number (leading to errors in the template).