Привет, я пытаюсь выполнить урок по угловому, но учебник был сделан в сентябре. Я считаю, что человек использовал angular-cli 1.3.2. Я не уверен, какую версию rxjs он использовал. Я использую угловые cli 6.0.0 и угловые 6 с rxjs 6.1.0.
Я столкнулся с проблемой, когда вызов.map on observable не найден. ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'. Я просмотрел класс Observable, и я не вижу функцию, называемую map.
Есть ли новый способ в угловых 6 или rxjs для достижения того, что пытается сделать учебник?
Вот мой файл.ts:
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from 'rxjs/operators';
@Injectable()
export class DataService {
constructor(private http: HttpClient) {
}
public products = [
];
loadProducts() {
return this.http.get("/api/products")
.map((data: any[]) => {
this.products = data;
return true;
});
}
}
Это вывод из ng --version
λ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _' | | | | |/ _' | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/build-angular 0.6.0
@angular-devkit/build-optimizer 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0 (cli-only)
@ngtools/webpack 6.0.0
@schematics/angular 0.6.0 (cli-only)
@schematics/update 0.6.0 (cli-only)
rxjs 6.1.0
typescript 2.7.2
webpack 4.6.0
Я немного поработал, и в моей папке node_modules/rxjs/observable нет файла карты. *
λ ls -R rxjs\observable
'rxjs\observable':
ArrayLikeObservable.d.ts IfObservable.d.ts combineLatest.d.ts if.js.map
ArrayLikeObservable.js IfObservable.js combineLatest.js interval.d.ts
ArrayLikeObservable.js.map IfObservable.js.map combineLatest.js.map interval.js
ArrayObservable.d.ts IntervalObservable.d.ts concat.d.ts interval.js.map
ArrayObservable.js IntervalObservable.js concat.js merge.d.ts
ArrayObservable.js.map IntervalObservable.js.map concat.js.map merge.js
BoundCallbackObservable.d.ts IteratorObservable.d.ts defer.d.ts merge.js.map
BoundCallbackObservable.js IteratorObservable.js defer.js never.d.ts
BoundCallbackObservable.js.map IteratorObservable.js.map defer.js.map never.js
BoundNodeCallbackObservable.d.ts NeverObservable.d.ts dom/ never.js.map
BoundNodeCallbackObservable.js NeverObservable.js empty.d.ts of.d.ts
BoundNodeCallbackObservable.js.map NeverObservable.js.map empty.js of.js
ConnectableObservable.d.ts PairsObservable.d.ts empty.js.map of.js.map
ConnectableObservable.js PairsObservable.js forkJoin.d.ts onErrorResumeNext.d.ts
ConnectableObservable.js.map PairsObservable.js.map forkJoin.js onErrorResumeNext.js
DeferObservable.d.ts PromiseObservable.d.ts forkJoin.js.map onErrorResumeNext.js.map DeferObservable.js PromiseObservable.js from.d.ts pairs.d.ts
DeferObservable.js.map PromiseObservable.js.map from.js pairs.js
EmptyObservable.d.ts RangeObservable.d.ts from.js.map pairs.js.map
EmptyObservable.js RangeObservable.js fromArray.d.ts race.d.ts
EmptyObservable.js.map RangeObservable.js.map fromArray.js race.js
ErrorObservable.d.ts ScalarObservable.d.ts fromArray.js.map race.js.map
ErrorObservable.js ScalarObservable.js fromEvent.d.ts range.d.ts
ErrorObservable.js.map ScalarObservable.js.map fromEvent.js range.js
ForkJoinObservable.d.ts SubscribeOnObservable.d.ts fromEvent.js.map range.js.map
ForkJoinObservable.js SubscribeOnObservable.js fromEventPattern.d.ts throw.d.ts
ForkJoinObservable.js.map SubscribeOnObservable.js.map fromEventPattern.js throw.js
FromEventObservable.d.ts TimerObservable.d.ts fromEventPattern.js.map throw.js.map
FromEventObservable.js TimerObservable.js fromIterable.d.ts timer.d.ts
FromEventObservable.js.map TimerObservable.js.map fromIterable.js timer.js
FromEventPatternObservable.d.ts UsingObservable.d.ts fromIterable.js.map timer.js.map
FromEventPatternObservable.js UsingObservable.js fromPromise.d.ts using.d.ts
FromEventPatternObservable.js.map UsingObservable.js.map fromPromise.js using.js
FromObservable.d.ts bindCallback.d.ts fromPromise.js.map using.js.map
FromObservable.js bindCallback.js generate.d.ts zip.d.ts
FromObservable.js.map bindCallback.js.map generate.js zip.js
GenerateObservable.d.ts bindNodeCallback.d.ts generate.js.map zip.js.map
GenerateObservable.js bindNodeCallback.js if.d.ts
GenerateObservable.js.map bindNodeCallback.js.map if.js
'rxjs\observable/dom':
AjaxObservable.d.ts AjaxObservable.js.map WebSocketSubject.js ajax.d.ts ajax.js.map webSocket.js
AjaxObservable.js WebSocketSubject.d.ts WebSocketSubject.js.map ajax.js webSocket.d.ts webSocket.js.map
В [email protected] вы можете использовать как автономную функцию:
import { from } from 'rxjs';
См. Также руководство по переходу на rxjs6.
https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths
ОБНОВИТЬ
Вам нужно переключиться на конвейерный синтаксис, убедитесь, что вы импортируете все операторы, используемые из rxjs/operator. Например:
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
pipe - это метод в Observable, который используется для составления операторов.
Вот как вы можете использовать новый метод pipe() в Версии 6:
loadProducts() {
return this.http.get("/api/products").
pipe(
map((data: any[]) => {
this.products = data;
return true;
}), catchError( error => {
return throwError( 'Something went wrong!' )
});
)
}
Имейте в виду, что в версии 6 теперь вы должны использовать catchError и throwError вместо: catch и throw. Вот правильный импорт с версией 6:
import { Observable, of, throwError,...} from "rxjs"
import { map, catchError,...} from "rxjs/operatros"
Вы должны перейти к синтаксису pipe:
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {map, catchError} from "rxjs/operators";
import { Observable, throwError } from 'rxjs';
list():Observable<any>{
return this.http.get(this.url)
.pipe(
map((e:Response)=> e.json()),
catchError((e:Response)=> throwError(e))
);
}
я столкнулся с той же проблемой. Давайте изменим способ импорта карты. используйте код, который я написал ниже
import { map } from "rxjs/operators";
тогда используйте трубу с картой. см. пример для лучшего понимания
import {Http,Headers,Response} from '@angular/http';
import { map } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class ContactServiceService {
constructor(private http:Http) { }
getContactList(){
return this.http.get('http://localhost:3000/contact')
.pipe(map(res => res.json()));
}
}
Угловая новая версия на самом деле не поддерживает.map. В новой угловой версии было сделано несколько изменений. Вы можете проверить их, посетив угловой веб-сайт, но вот решение этих проблем; выполните эти команды в целевом каталоге cmd вашего проекта:
npm install --save rxjs-compat
и наслаждайтесь старой техникой, но не забудьте добавить эти строки в общую службу:
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
По какой-то неясной причине rxjs-compat иногда не получает автоматически, вы можете импортировать ее самостоятельно, например, в polyfills.ts:
import 'rxjs-compat';
В Angular 6x с rxjs 6.3.3 вы можете сделать это. В файле (app.component.ts)
import { Component } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
_url = 'http://...';
constructor( private http: HttpClient ) { }
articles: Observable<any>;
// Method to get info
getAPIRest() {
const params = new HttpParams().set('parameter', 'value');
const headers = new HttpHeaders().set('Autorization', 'auth-token');
this.articles = this.http.get(this._url + '/articles', { params, headers })
.pipe( retry(3),
map((data => data),
catchError(err => throwError(err))));
}
}