Angular 4 HttpClientModule 和 map() 函数

Question

I am facing an issue in regard to new HttpClientModule and the map() function from RX.js.

What I want to do is to change the objects of the returned array inside the observable coming from the get() method.

My curent code:

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

The error that I get:

Type 'Observable<{ Id: any; Name: string; BlobSrc: string; }>' is not assignable to type 'Observable'.

Type '{ Id: any; Name: string; BlobSrc: string; }' is not assignable to type 'any[]'.

As far as I know, the map() method returns an observable with value only one object instead of an array.

What is the correct syntax in order to return an observable containing an Array of { Id: any; Name: string; BlobSrc: string; } { Id: any; Name: string; BlobSrc: string; } { Id: any; Name: string; BlobSrc: string; } objects?

Answer 1

If your http request returns an array of players, then this is how your code should look like:

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

Here is the code I try to run, based on yours Amit. I add a debugger inside nested map but never get in. There is no actual error.