Не могу поймать изменение переменной Angular 8 - PullRequest
Новая
       6

Не могу поймать изменение переменной Angular 8

0 голосов
/ 29 октября 2019

Доброе утро, я разрабатываю простое (на данный момент) приложение на Angular для обучения, но, похоже, я не могу уловить переменное изменение в сервисе. Я имею в виду, что у меня есть компонент, подписывающий переменную из службы, но когда переменная в службе обновляется, переменная в компоненте не обновляется.

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

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AnswersService } from "./answers.service";

export class AnswersComponent implements AfterViewInit, OnDestroy {
  hours = [];

  constructor(private answersService: AnswersService) {
    this.answersService.hours.subscribe(value => {
      this.hours = value; // value doesn't get changed
      console.log(value); // never gets logged
    });
  }

  // ... then i use the this.hours variable down below
}

Мой сервис: 

import { Injectable, OnInit } from '@angular/core';
import { ServerService } from '../../../server.service';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AnswersService implements OnInit {

  constructor(private server: ServerService) { }
  hours = new Subject<any[]>();

  ngOnInit() {
    this.getHours(); // on init i get the new data
  }

  private getHours() { // when this happens, my Subject should be updated
      this.hours.next(['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00']);
  }
}

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

Что я не правильно понял? Многие руководства / ответы StackOverflow я пытался сделать то же самое, что я пытался, поэтому я не понимаю, в чем проблема.

РЕДАКТИРОВАТЬ: как было предложено, я переместил вызов методадля обновления от onInit (который не работает должным образом со службами) до конструктора. Кроме того, я изменил его с Subject на BehaviorSubject.

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

private getHours() {
  this.server.getExperiment({id:1}).then((response: any) => {
    // Just a simple endpoint I've set for this time
    this.hours.next(['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00']);
  });
}

getExperiment реализован следующим образом: 

private async request(method: string, url: string, data?: any) {
  const result = this.http.request(method, url, {
    body: data,
    responseType: 'json',
    observe: 'body'
  });
  return new Promise((resolve, reject) => {
    result.subscribe(resolve, reject);
  });
}

getExperiment(experiment) {
  return this.request('GET', `http://localhost:8080/experiment/${experiment.id}`);
}

После комментария я попытался отредактировать его (с тем же результатом), что и: 

private request(method: string, url: string, data?: any) {
  return this.http.request(method, url, {
    body: data,
    responseType: 'json',
    observe: 'body'
  });
}

, так что я могу подписаться вместо ожиданияОбещание: 

private getHours() {
  this.server.getExperiment({id:1}).subscribe((response: any) => {
    this.hours.next(['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00']);
  });
}

1 Ответ

0 голосов
/ 29 октября 2019

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

Спасибо всем, кто помог мне в комментариях.

...