The best way to update component after fetch data without user action in Angular2

Question

Question like in title. How to update component view after fetch data without user action? Now i must click on component to update data in table. It's quite annoying.

export class DataStorageService {

  constructor(private db: AngularFireDatabase, private gameTableService: GameTableService) {
  }

  getData() {
    this.db.database.ref('gameRows').on('value', snapshot => {
      this.gameTableService.processData(snapshot.val());
      console.log(snapshot.val());
    });
  }
}

export class GameTableService {
  gameRows: GameRowModel[] = [];
  scoresObserver: Subject<GameRowModel[]> = new Subject<GameRowModel[]>();

  constructor(private playerService: PlayerService) {
  }

  processData(gameRow: GameRowModel) {
    this.gameRows.push(this.addRow(gameRow));
    this.playerService.getPlayers().forEach((player, index) => {
      player.updatePlayerData(gameRow.playerScores[index]);
    });
    this.scoresObserver.next(this.gameRows);
  }
}

export class GameTableComponent implements OnInit {
  playersNames: string[] = [];
  gameRows: GameRowModel[] = [];

  constructor(private playerService: PlayerService,
              private gameTableService: GameTableService,
              private dataStorageService: DataStorageService) {
  }

  ngOnInit() {
    this.playerService.getPlayers().forEach((player) => {
      this.playersNames.push(player.name);
    });
    this.dataStorageService.getData();
    this.gameTableService.scoresObserver.subscribe(gameRows => {
      this.gameRows = gameRows;
    });
  }
}

 <div class="col border-warning border">
      <div class="row">
        <div class="col-md-1 text-center">#</div>
        <div class="col text-center" *ngFor="let player of playerService.getPlayers()"> {{player.name}}</div>
      </div>
    <div style="overflow-y: scroll; overflow-x: hidden; max-height: 250px;">
      <app-game-row class="text-center" *ngFor="let row of gameTableService.getGameRows()" [gameRow]="row"></app-game-row>
    </div>
  </div>

I'm trying to use subscribe but this update field in component insted of data on view.

Answer 1

If I understand your question correctly..

https://angular.io/api/core/ChangeDetectorRef

Try to inject this class in the GameTableComponent.

  constructor(private playerService: PlayerService,
              private gameTableService: GameTableService,
              private dataStorageService: DataStorageService,
              private changedetector: ChangeDetectorRef) {
  }

You can then anywhere in the code 'force' the changes to be detected in your ts instead of userinteraction.

this.changedetector.detectChanges();

Above will do if you put it after defining the property in the subscribe block. Let me know if it worked ;)