Karte existiert nicht auf Beobachtbaren<Object> mit kantigem 6.0.0 und rxjs 6.1.0

Hallo, ich versuche zu Folgen, ein tutorial auf eckig aber das tutorial war im September. Ich glaube, die person benutzt, eckig-cli 1.3.2. Ich bin mir nicht sicher, welche version von rxjs er war mit. Ich bin mit Winkel-cli 6.0.0 und Winkel 6 mit rxjs 6.1.0.

Habe ich ein problem, wo aufrufen .Karte auf beobachtbaren nicht gefunden.
ERROR in xxx/xxx/dataService.ts(19,14): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
Ich schaute in die Observable-Klasse und ich sehe nicht eine Funktion namens map.

Ist es ein neuer Weg, im Winkel 6 oder rxjs zu erreichen, was das tutorial versucht zu machen?

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

Habe ich ein wenig Graben und in meine node_modules/rxjs/observable-Ordner gibt es keine Karte.* 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

Hast du gelesen github.com/ReactiveX/rxjs/blob/master/MIGRATION.md?
Dies ist mein erstes mal versucht zu lernen, eckig und mit rxjs und dein link hat mir sehr geholfen. Danke!
Der link im Kommentar oben gelesen werden und Lesezeichen von jeder Migration zu rxjs 6. Die darin enthaltenen Informationen ist sehr wertvoll!!
Dokument ist nicht mehr verfügbar 🙁

InformationsquelleAutor Jonathan | 2018-05-05

19

In rxjs@6 verwendet werden kann als Stand-alone-Funktion:
```
import { from } from 'rxjs';
```
Siehe auch migration zu rxjs6 guide

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

UPDATE

Müssen Sie Schalter zu pipe-syntax, stellen Sie sicher, dass Sie importieren alle Operatoren aus rxjs/Betreiber. Zum Beispiel:
```
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
```
DOKUMENTATION

Hey danke für die Hilfe! diesen link hat mir sehr geholfen. Es war tatsächlich dieser Abschnitt, der mir geholfen: github.com/ReactiveX/rxjs/blob/master/... ich brauchte, um das pipe-syntax.
ok cool, Markierung, wenn das halped
Ich würde vorschlagen, um Ihren eigenen Beitrag Lösung, dies kann helfen, die künftigen Leser. Selbst-Antworten sind willkommen.
bei Sajeetharan, Sorry, dein post hat nicht direkt mir helfen. Wenn Sie Bearbeiten Ihre post umfassen den Teil über Rohrleitungen und zeigen Sie die korrekte syntax werde ich markieren Sie es als Antwort. @estus ich bin gehen zu lassen, Sajeetharan Bearbeiten seiner post erst dann werde ich mark seine als die richtige. Ansonsten werde ich meine eigenen post, wenn er es nicht innerhalb einer bestimmten Zeit.

InformationsquelleAutor Sajeetharan
16

pipe() ist eine Methode, die einfach nur Argumente und jedes argument ist ein operator, den Sie wollen/können sich bewerben, um Ihr zu beobachten.

Hier ist die Art und Weise, wie Sie mit der neuen Methode pipe() in Version 6:
```
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 mit der Version 6 soll nun catchError und throwError statt:catch und throw. Hier ist der richtige import mit der Version 6:

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

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

InformationsquelleAutor k.vincent

Müssen Sie ändern, um die pipe-syntax:

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

InformationsquelleAutor oware

0

Den Kantigen neuen version tatsächlich nicht unterstützt .Karte. Ein paar änderungen vorgenommen wurden, die neue eckige version. Sie können diese durch den Besuch der Winkel-website, aber hier ist eine Lösung dieser Probleme; führen Sie diese Befehle in
cmd Ziel Ihres Projektes:
```
 npm install --save rxjs-compat
```
und genießen Sie mit der alten Technik, aber vergessen Sie nicht, fügen Sie diese Zeilen in shared service:
```
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch';
```
InformationsquelleAutor kashif
0

Für einige obskure Grund rxjs-compat manchmal nicht automatisch aufgenommen, können Sie importieren Sie es selbst, in polyfills.ts zum Beispiel:

import 'rxjs-compat';

InformationsquelleAutor Renaud

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

}

InformationsquelleAutor EdgarMorales

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.