订阅可观察的问题

时间:2018-12-11 01:18:12

标签: angular angular7

我将以下代码作为服务的一部分:

return this.httpClient.get<Country[]>('http://localhost:8080/countries');

它通过带有模拟值的单元测试。 但是,在ngOnInit()函数中使用时,它不会为变量分配相关值。

this.supportedCountriesFetcherService.fetchSupportedCountries().subscribe((data) => (this.supportedCountries = data));

我已经测试过邮递员,并且localhost返回相关的json。 如果我要记录订阅数据而不是分配数据,则不会返回记录的数据(实际上要么添加空白日志,要么根本不添加)。

如何解决此问题?

编辑:

与服务相关的代码(无接口):

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SupportedCountriesFetcherService {

  public fetchSupportedCountries(): Observable<Country[]> {
     return this.httpClient.get<Country[]>('http://localhost:8080/countries');
  }

  constructor(private httpClient: HttpClient) { }
}

与组件相关的代码:

import { Component, OnInit } from '@angular/core';
import { Country, SupportedCountriesFetcherService } from 'src/app/services/supported-countries-fetcher.service';


@Component({
  selector: 'app-input-form',
  templateUrl: './input-form.component.html',
  styleUrls: ['./input-form.component.css']
})
export class InputFormComponent implements OnInit {

  private supportedCountries: Country[];

  constructor(private supportedCountriesFetcherService: SupportedCountriesFetcherService) { }

  ngOnInit() {
     this.supportedCountriesFetcherService.fetchSupportedCountries()
     .subscribe((data) => this.supportedCountries = data, (error) => console.log(error));
   }

}

1 个答案:

答案 0 :(得分:0)

您可能在http请求中遇到错误。 尝试更改您的订阅以添加错误处理程序,如下所示:

this.supportedCountriesFetcherService.fetchSupportedCountries()
  .subscribe(
     (data) => this.supportedCountries = data,
     (err) => console.error(err);
  );

您应该会看到错误。

我假设您的Angular应用程序在端口4200上运行,这意味着,除非您使用代理,否则可能会收到CORS错误。

如果是这样,出于开发目的,最容易做的就是设置代理服务器。

您可以在https://angular.io/guide/build#proxying-to-a-backend-server上阅读有关设置webpack开发服务器代理的官方文档