Question

当我编写以下代码时，我正在使用angular6：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
EditDetail(data) : Observable<Test[]> {
    let url = "http://www.example.com/api/getdetails";     
    return this.httpClient.get(url).map((response: Response) => {
    return <Test[]>response.json();
});

我遇到了类似这样的错误：

this.httpClient.get(...).map is not a function

在浏览器控制台中。

我也尝试过

import { pipe } from 'rxjs';

二手

return this.httpClient.get(url).pipe(
map((response: Response) => <Test[]>response.json())
  );

但是它显示类似错误

 this.httpClient.get(...).pipe is not a function

Answer 1

从 RxJS 5.5 开始，您需要pipe map函数。

return this.httpClient.get(url).pipe(
   map((response: Response) => <Test[]>response.json())
);

有关更多信息，请参见Pipeable operators。

Answer 2

您可以尝试使用此解决方案。

this.httpClient.get(...).pipe(
    map(data => res)
).subscribe((data):any=>{
    console.log(data)
})

Answer 3

使用管道以使用地图。您需要使用http客户端模块才能使用管道功能。导入并在构造函数中初始化

import {HttpClient} from '@angular/common/http';
this.httpClient.get(...).pipe(map(data => res))

Answer 4

首先，您需要导入操作员图：

import { map } from 'rxjs/operators';

第二，您可以像这样使用pipe（map（））

return this.httpClient.get(url).pipe(map((response: Response) => {}))

Answer 5

使用Angular 6和rxjs 6.3.1时，其工作原理如上所述。我对rxjs的更改也遇到了一些问题，并创建了一个小演示。

进口：

`import { HttpClient, HttpErrorResponse, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators'
`

带有httpclient-get的simple1函数。在地图功能中，完成了一些过滤。返回值是可观察的：

`simple1(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/todos').pipe(
      map((res:[any]) => {
        let newArray:[any] = <any>[] ;
        res.forEach( (e) => {
          if( e['title'][0] == 'a') {
              newArray.push( res[0])
          }
        })
        return newArray
      })
    )
  }`

消费可观察物：

`constructor(private http: HttpClient) {
    this.simple1().subscribe(
      (response:HttpResponse<any>) => { console.log(response)},
      (error:HttpErrorResponse) => { console.log("error", error)},
      () => { console.log( 'finish')}
    )
  }`

Complete demo code is here

Angular6贴图不是函数

5 个答案: