Angular6 地图不存在

Question

This is my first project in angular 6. 我想在我的项目中使用chart.js。我安装了 chart.js 并按照 link https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---教程

但是我的 service.ts 文件中出现错误。它抛出错误“[ts] 属性 'map' 在类型 'Observable' 上不存在。”

我的服务代码是

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class DragchartService {

  constructor(private _http: HttpClient) { }
  dailyForecast() {
    return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22")
      .map(result => result);
  }

}

所以我请求你帮助我解决这个问题。谢谢。

Answer 1

来自 CLI V6 的自举应用程序使用 rxjs 6。Rxjs6 使用管道运算符，因此会抛出该错误。

您引用的代码使用了较早版本的 rxjs（可能是 rxjs 5）。

为了让您的代码与 rxjs 6 一起工作，它应该更新如下

import { map } from 'rxjs/operators';

// Your other code

dailyForecast() {
  return this._http.get(<your url>).pipe(map(result => result)); 
}

Answer 2

根据最新的 RxJS 版本，他们进行了更改，现在 http 请求可以扩展管道，管道可以采用

等参数

filter(x => x % 2 === 1), map(x => x + x),catchError(res=>{console.log(res)})

从

导入

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap , CatchError } from 'rxjs/operators';

所以现在如果你想使用 Map，CatchError 等，那么我们需要将它作为管道的参数传递

 dailyForecast() {
    return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22")
      .pipe(map(x => console.log(x)),catchError(res=>{console.log(res)}));
  }

Angular6 地图不存在

Angular6 map doesn't exist

javascript

object

observable

rxjs

angular6