Question

我有一个端点，它看起来像这样：

organizationSubsidiaries(sfid: string) {
  const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
  return this.http.get(url).map(res => res.json());
}

如果我这样称呼它，则可以正常运行并正常运行：

getOrgSubsidiaries(id) {
  return this.organizationSubsidiaries(id)
    .subscribe(data => { //changing this to .map means it won't work!

      let subsidiaryNames = []
      data.forEach(sub => {
        console.log(sub.SubsidiaryName)
        subsidiaryNames.push(sub.SubsidiaryName)
      })
      subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);

      console.log('data from subsidiaries' + JSON.stringify(subsidiaryNames))

    });
}

当它为.map时不起作用，但是我需要为.map，因为我需要subscribe到另一个文件中，以便可以异步使用另一个文件中的数据组件：

ngOnInit(): void {
  this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
     this.orgSubsidiaries = data;
});

我需要它，因此.map也可以像subscribe一样工作，因此我实际上可以subscribe使用它并使用其他组件中的数据！谢谢！

在一个稍有不同的问题中，我其他组件中的此功能无法识别id。

Answer 1

在rxjs 6中使用管道

 return this.http.get(url).pipe( map(res => res.json()));

导入地图

import { map } from 'rxjs/operators'

Answer 2

问题取决于两件事：

您正在使用哪个版本的Angular。
您使用的是HttpClient还是Http

首先让我们谈谈Angular版本：

如果您使用的是Angular 6，它是Rxjs 6附带的。因此，在任何Observable类型的值上，您都无法直接通过从它们的路径导入map这样的运算符来使用它们。将它们链接到Observable值。在这种情况下，您将必须使用.pipe值上可用的Observable，然后在此.pipe内使用运算符。

例如：

import { map } from 'rxjs/operators';
...
return this.http.get('...').pipe(map(...))  // This returns an Observable too

如果您使用的是Angular 5、4或2，则它带有Rxjs的早期版本。因此，在任何Observable类型的值上，您都可以直接使用map之类的运算符，方法是从它们的路径中导入它们并将它们链接到Observable值。在这种情况下，您不必使用.pipe

例如：

import 'rxjs/add/operators/map';
...
return this.http.get('...').map(...)  // This returns an Observable too

现在，让我们谈谈您使用的是HttpClient还是Http：

如果您使用的是HttpClient，则不必通过在其上调用.json来映射响应。所以你可以简单地做：

constructor(private http: HttpClient, ...) {}
...
return this.http.get(...); // This will return the Actual Response DATA

如果您使用的是Http，则必须通过在其上调用map来.json。

因此在Angular 2,4,5的情况下，它看起来像：

import 'rxjs/add/operators/map'
...
constructor(private http: Http, ...) {}
...
return this.http.get(...).map(res => res.json());

在Angular 6的情况下，我猜想Http已被删除。因此，您一开始就无法将其作为依赖项注入。

更新

我认为问题在于您尚未在Http服务中注入HttpClient或EngagementService作为依赖项。因此是错误。

对于Angular 6：

只需添加一个constructor，即可将HttpClient作为依赖项注入。

Observables-Angular-.map不起作用，但是.subscribe起作用

2 个答案:

更新