wake-up-neo.com

Map ist auf Observable <Object> mit dem Winkel 6.0.0 und den Rxjs 6.1.0 nicht vorhanden

Hallo, ich versuche, ein Tutorial zu eckig zu verfolgen, aber das Tutorial wurde im September erstellt. Ich glaube, die Person, die winklige Kli verwendet hat. 1.3.2. Ich bin mir nicht sicher, welche Version von RXJs er verwendete. Ich verwende eckig cli 6.0.0 und eckig 6 mit rxjs 6.1.0.

Ich habe ein Problem, bei dem der Aufruf von .map für observable nicht gefunden wurde .ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'. Ich habe mir die Klasse Observable angesehen und sehe keine Funktion namens map.

Gibt es einen neuen Weg in Winkel 6 oder rxjs, um das zu erreichen, was das Tutorial versucht?

Hier ist meine .ts-Datei:

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

Dies ist die Ausgabe von 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

Ich habe ein wenig gegraben und in meinem Ordner node_modules/rxjs/observable gibt es keine map. * Datei

λ 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
angulartypescriptrxjs
12
Jonathan

In [email protected] können Sie als Standalone-Funktion verwenden:

import { from } from 'rxjs';

Siehe auch Migration zu RXJS6

https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#import-paths

UPDATE

Sie müssen zur Pipe-Syntax wechseln. Stellen Sie sicher, dass Sie alle von rxjs/operator verwendeten Operatoren importieren. Zum Beispiel:

import { map, filter, catchError, mergeMap } from 'rxjs/operators';

DOKUMENTATION

16
Sajeetharan

pipe() ist eine Methode, die einfach Argumente übernimmt, und jedes Argument ist ein Operator, den/die Sie auf Ihr Observable anwenden können/können.

So können Sie die neue Methode pipe() in Version 6 verwenden:

loadProducts() {
    return this.http.get("/api/products")
        pipe(
           map((data: any[]) => {
             this.products = data;
             return true;
           }), catchError( error => {
             return throwError( 'Something went wrong!' )
           });
        )
}

Beachten Sie, dass Sie mit Version 6 jetzt catchError und throwError anstelle von: catch und throw verwenden sollten. Hier ist der korrekte Import mit Version 6:

import { Observable, of, throwError, ...} from "rxjs"

import { map, catchError, ...} from "rxjs/operatros"

14
k.vincent

Sie müssen zur Pipe-Syntax wechseln:

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

ich hatte das gleiche Problem. Ändern Sie die Art und Weise, wie die Karte importiert wird. Verwenden Sie den Code, den ich unten geschrieben habe

import { map } from "rxjs/operators";

dann Pipe mit Map verwenden. Zum besseren Verständnis siehe das Beispiel

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

}
1
satywan kumar

Die neue Version von Angular unterstützt .map eigentlich nicht. In der neuen Winkelversion wurden einige Änderungen vorgenommen. Sie können dies überprüfen, indem Sie die eckige Website besuchen. Hier finden Sie eine Lösung für diese Probleme. Führen Sie die folgenden Befehle in cmd als Ziel Ihres Projekts aus: 

 npm install --save rxjs-compat

und genießen Sie die alte Technik. Vergessen Sie jedoch nicht, diese Zeilen im Shared Service hinzuzufügen: 

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch';
0
S.M.Kashif

In Angular 6x mit rxjs 6.3.3 können Sie dies tun. In der Datei (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))));
  }

}

0
EdgarMorales

Aus irgendeinem unklaren Grund wird rxjs-compat manchmal nicht automatisch abgeholt. Sie können ihn selbst importieren, beispielsweise in polyfills.ts:

import 'rxjs-compat';

0
Renaud