Question

早上好，我正在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（不适用于服务）移动到了构造函数。此外，我将其从“主题”更改为“ 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'
  });
}

这样我可以订阅而不是等待Promise：

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

Answer 1

对于可能遇到我同样问题的每个人：注释中采用的解决方案可以解决该问题。我的第二个问题是一个异步问题，我没有在组件中正确使用订阅服务器。

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

无法捕获Angular 8变量更改

1 个答案: