Angular Can';t捕捉角度8变量的变化

Angular Can';t捕捉角度8变量的变化,angular,observable,Angular,Observable,早上好, 我正在Angular开发一个简单(目前)的应用程序来训练自己,但我似乎无法捕捉到服务中的可变变化。 我的意思是,我有一个组件从服务订阅一个变量,但是当服务中的变量得到更新时,组件中的变量没有 我的组成部分: import { AfterViewInit, Component, OnDestroy } from '@angular/core'; import { AnswersService } from "./answers.service"; export class Answer

早上好, 我正在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']);
  }
}
GetExperience的实现方式如下:

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

对于每个可能有我同样问题的人:评论中采用的解决方案解决了这个问题。 我的第二个问题是异步问题,我没有在组件中正确使用订阅服务器


感谢所有在评论中帮助我的人。

感谢所有可能有我同样问题的人:评论中采用的解决方案解决了问题。 我的第二个问题是异步问题,我没有在组件中正确使用订阅服务器


感谢所有在评论中帮助我的人。

能否尝试将此.getHours()移到订阅中。服务上的NgOnInit并不常见。看:嗯,对不起,但是你在订阅中移动它是什么意思?它是否与“在构造函数中”相同,并且组件保持不变?正如Marcel所述,ngOnInit不是为角度服务启动的,因此您必须从构造函数调用
getHours()
。您可以考虑使用<代码>行为主体来保留主题的最后一个值。很抱歉,我说的订阅我是指移动到courseHi mate服务的构造函数,您应该尝试而不是在
构造函数中获取服务值
尝试在
ngOnInit中获取服务值。别忘了实现它:
导出类应答组件在ViewInit、OnDestroy、OnInit
之后实现,并导入它:
从'@angular/core
导入{OnInit};请尝试将此.getHours()移动到订阅中。服务上的NgOnInit并不常见。看:嗯,对不起,但是你在订阅中移动它是什么意思?它是否与“在构造函数中”相同,并且组件保持不变?正如Marcel所述,ngOnInit不是为角度服务启动的,因此您必须从构造函数调用
getHours()
。您可以考虑使用<代码>行为主体来保留主题的最后一个值。很抱歉,我说的订阅我是指移动到courseHi mate服务的构造函数,您应该尝试而不是在
构造函数中获取服务值
尝试在
ngOnInit中获取服务值。别忘了实现它:
导出类应答组件在ViewInit、OnDestroy、OnInit
之后实现,并导入它:
从'@angular/core
导入{OnInit};
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']);
  });
}