Angular 4 HttpClientModule和map（）函数

Question

我正面临一个问题，关于新的HttpClientModule和map()函数从RX.js.

我想要做的是更改来自get()方法的observable中返回数组的对象。

我CURENT代码：

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);

，我得到的错误：

类型“可观察< {ID：任;名称：string; BlobSrc：string; }>'不能分配给'Observable'类型。

输入'{Id：any;名称：string; BlobSrc：string; }'不可分配为键入'any []'。

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

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

Answer 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) 
      }); 
     }); 
    } 
} 

Answer 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) 
        }) 
       }); 
      }); 
    } 
} 

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