Лучший способ обновить компонент после выборки данных без действий пользователя в Angular2

Question

Вопрос как в заголовке. Как обновить представление компонентов после извлечения данных без действий пользователя? Теперь я должен нажать на компонент, чтобы обновить данные в таблице. Это довольно раздражает.

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>

Я пытаюсь использовать подписку, но это поле обновления в компоненте, заполненном данными на представлении.

Answer 1

Если я правильно понимаю ваш вопрос ..

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

Попробуйте добавить этот класс в GameTableComponent.

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

Затем вы можете в любом месте кода «заставить» изменения, которые будут обнаружены в вашем ts, вместо взаимодействия с пользователем.

this.changedetector.detectChanges();

Выше будет действовать, если вы поместите его после определения свойства в блоке подписки. Дайте мне знать, если это сработало;)