Angular2 rxjs数据异步

Question

I make this template for display computed something.

compute function is getPredictedRate().

  <div class="ranking-list-container panel panel-default" *ngIf="isTasteGameRanking">
    <ul class="ranking-list list-group">
      <li class="ranking-element list-group-item row" *ngFor="let gameRate of gameRates | slice:0:10; let i = index;">
        <div class="index col-xs-1"> {{ i + 1 }} </div>
        <div class="game-title col-xs-10"><a (click)="moveToGameDetailPage(gameRate.gr_title)" > {{ gameRate.gr_title }} </a></div>
        <div class="game-rate col-xs-1" > {{ getPredictedRate(gamRate.gr_title) }} </div>
      </li>
    </ul>
  </div>

This is getPredictedRate()

 public getPredictedRate( targetGame:string ) {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    let num = 5;
    this.gameService.getGameByTitle( targetGame ).subscribe(
      game => {
        this.game = game;
        this.userService.getCompareUsersByTargetUserId( this.currentUser.id, num ).subscribe(
          compareUsers => {
            this.users = compareUsers;
            let result = this.predictedGameRateService.computePredictedGameRate( this.game, this.currentUser, this.users );
            console.log( result );
          }
        );
      }
    );
  }

If i call this function on template. this function was called over and over and over again.

What i miss in this code? Please Help me. I can't sleep two days. Because of this problem...

Answer 1

The template re-evaluates the expression repeatedly. One solution could be to simply change it to:

    <div class="game-rate col-xs-1" >{{result}}</div>