Angular 4 HttpClientModule 和 map() 函数答案

【问题标题】：Angular 4 HttpClientModule and map() functionAngular 4 HttpClientModule 和 map() 函数
【发布时间】：2018-02-07 19:18:23
【问题描述】：

我正面临一个与来自 RX.js 的新 HttpClientModule 和 map() 函数有关的问题。

我要做的是更改来自get() 方法的可观察对象内返回数组的对象。

我当前的代码：

get(url: string): Observable < any > {
  return this.http.get(this.config.baseUrl + url);
}


playerSearch(text: string): Observable < any[] > {
  if (text == "" || !text) {
    return Observable.of([]);
  } else {
    return this.auth.get(`/players?$expand=Contact($expand=Blob)&$filter=contains(Contact/LastName, '${text}') or contains(Contact/FirstName, '${text}')`).map((x) => {
      return {
        Id: x.Id,
        Name: x.Contact.FirstName + " " + x.Contact.FatherName.substring(0, 2) + ". " + x.Contact.LastName,
        BlobSrc: this.utilitiesService.imageLinkCreator(x)
      }
    });
  }
}

search = (text$: Observable < string > ) =>
  text$
  .debounceTime(300)
  .distinctUntilChanged()
  .do(() => this.searching = true)
  .switchMap(term =>
    this.dataService.playerSearch(term)
    .do(() => this.searchFailed = false)
    .catch(() => {
      this.searchFailed = true;
      return Observable.of([]);
    }))
  .do(() => this.searching = false);

我得到的错误：

类型 'Observable' 不可分配给类型 'Observable'。

键入'{ ID：任何；名称：字符串； BlobSrc：字符串； }' 不能分配给类型 'any[]'。

据我所知，map() 方法返回一个 observable，其值只有一个对象，而不是一个数组。

为了返回包含{ Id: any; Name: string; BlobSrc: string; } 对象数组的可观察对象，正确的语法是什么？

【问题讨论】：

你期望从http请求返回什么？
其实map跟数组/不是数组没有任何关系，它只需要一个Observable<T>和一个函数T => S并返回一个Observable<S>
在这种情况下，您将返回值标记为 Observable<any[]>，这首先是一个数组，但是您将数据映射到一个对象中。

标签： angular rxjs

【解决方案1】：

如果你的 http 请求返回一个玩家数组，那么你的代码应该是这样的：

get(url: string): Observable<any[]> {
        return this.http.get(this.config.baseUrl + url);
    }


playerSearch(text: string): Observable<any[]> {
    if (text == "" || !text) {
        return Observable.of([]);
    } else {
        return this.auth.get(`/players?$expand=Contact($expand=Blob)&$filter=contains(Contact/LastName, '${text}') or contains(Contact/FirstName, '${text}')`).map((arr: any[]) => {
            return arr.map(x => ({
                Id: x.Id,
                Name: x.Contact.FirstName + " " + x.Contact.FatherName.substring(0, 2) + ". " + x.Contact.LastName,
                BlobSrc: this.utilitiesService.imageLinkCreator(x)
            });
        });
    }
}

【讨论】：

是的，http req 返回一个玩家数组。我使用了您的代码，但似乎 return arr.map 不起作用
我已经发布了我尝试在 Amit 上运行的代码。

【解决方案2】：

playerSearch(text: string): Observable<any[]> {
    if (text == "" || !text) {
        return Observable.of([]);
    } else {
        return this.auth.get(`/players?$expand=Contact($expand=Blob)&$filter=contains(Contact/LastName, '${text}') or contains(Contact/FirstName, '${text}')`)
            .map((arr: any[]) => {
                return arr.map(x => {
                    debugger;
                    ({
                        Id: x.Id,
                        Name: x.Contact.FirstName + " " + x.Contact.FatherName.substring(0, 2) + ". " + x.Contact.LastName,
                        BlobSrc: this.utilitiesService.imageLinkCreator(x)
                    })
                });
            });
    }
}

这是我尝试运行的代码，基于您的 Amit。我在嵌套的map 中添加了一个调试器，但从未进入。没有实际错误。

【讨论】：