Ich habe ein Problem mit HTTP in Angular.
Ich möchte nur GET
eine JSON
Liste erstellen und in der Ansicht anzeigen.
Serviceklasse
import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
public http:Http;
public static PATH:string = 'app/backend/'
constructor(http:Http) {
this.http=http;
}
getHalls() {
return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
}
}
Und in der HallListComponent
rufe ich die getHalls
Methode aus dem Dienst auf:
export class HallListComponent implements OnInit {
public halls:Hall[];
public _selectedId:number;
constructor(private _router:Router,
private _routeParams:RouteParams,
private _service:HallService) {
this._selectedId = +_routeParams.get('id');
}
ngOnInit() {
this._service.getHalls().subscribe((halls:Hall[])=>{
this.halls=halls;
});
}
}
Ich habe jedoch eine Ausnahme:
TypeError: this.http.get (...). Map ist keine Funktion in [null]
hall-center.component
import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
template:`
<h2>my app</h2>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet],
providers: [HallService]
})
@RouteConfig([
{path: '/', name: 'HallCenter', component:HallListComponent, useAsDefault:true},
{path: '/hall-list', name: 'HallList', component:HallListComponent}
])
export class HallCenterComponent{}
app.component
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
selector: 'my-app',
template: `
<h1>Examenopdracht Factory</h1>
<a [routerLink]="['HallCenter']">Hall overview</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Http
Dienst gibt eine beobachtbare zurück1.8.36
der ng2-Kurzanleitung (während ich dies schreibe)"typescript": "^2.0.2"
. Aktualisieren der TS-Sprache. Service über Erweiterungen und Updates hat den Trick für mich getan. Während dieses Updates installiert wurde, stieß ich auf diese SO-Antwort , die mit der gleichen Schlussfolgerung endet.Antworten:
Ich denke, dass Sie dies importieren müssen:
Oder allgemeiner, wenn Sie mehr Methoden für Observable haben möchten. WARNUNG: Dadurch werden alle über 50 Operatoren importiert und Ihrer Anwendung hinzugefügt. Dies wirkt sich auf Ihre Bundle-Größe und Ladezeiten aus.
Weitere Informationen finden Sie in dieser Ausgabe .
quelle
import 'rxjs/add/operator/do'
... Während wir das nicht mehr tun müssen.map()
. Dies half meinem.do()
Fall jedoch zu erkennen, dass ich ihn speziell importieren muss. Vielen Dank! Eine Stimme von mir :)Nur ein paar Hintergrundinformationen ... Der neu geprägte Entwicklerleitfaden für Serverkommunikation diskutiert (erwähnt) / erklärt dies:
Da @Thierry bereits geantwortet hat, können wir einfach die Operatoren einbeziehen, die wir benötigen:
Wenn wir faul sind, können wir auch alle Operatoren einbeziehen. WARNUNG: Dadurch werden alle über 50 Operatoren zu Ihrem App-Bundle hinzugefügt und die Ladezeiten beeinflusst
quelle
Ab rxjs 5.5 können Sie die pipeable Operatoren verwenden
Was ist los mit dem
import 'rxjs/add/operator/map';
Wenn wir diesen Ansatz verwenden
map
, wird der Operator aufobservable.prototype
dieses Objekt gepatcht und wird Teil dieses Objekts.Wenn Sie später entscheiden, den
map
Operator aus dem Code zu entfernen, der den beobachtbaren Stream verarbeitet, die entsprechende Importanweisung jedoch nicht entfernen,map
bleibt der implementierte Code ein Teil vonObservable.prototype
.Wenn die Bundler versuchen, den nicht verwendeten Code (auch bekannt als
tree shaking
) zu entfernen , entscheiden sie sich möglicherweise dafür, den Code desmap
Operators im Observable zu behalten , obwohl er nicht in der Anwendung verwendet wird.Lösung -
Pipeable operators
Pipeable- Operatoren sind reine Funktionen und patchen das Observable nicht . Sie können Operatoren mithilfe der ES6-Importsyntax importieren
import { map } from "rxjs/operators"
und sie dann in eine Funktionpipe()
einschließen, die eine variable Anzahl von Parametern akzeptiert, dh verkettbare Operatoren.Etwas wie das:
quelle
Mit Angular 5 wird der RxJS-Import verbessert.
Anstatt
Wir können jetzt
quelle
Die
Observable.subscribe
direkte Verwendung sollte funktionieren.quelle
Für Angular-Versionen 5 und höher sieht die aktualisierte Importzeile folgendermaßen aus:
ODER
Auch diese Versionen unterstützen Pipable Operators vollständig, sodass Sie .pipe () und .subscribe () problemlos verwenden können.
Wenn Sie Angular Version 2 verwenden, sollte die folgende Zeile absolut einwandfrei funktionieren:
ODER
Wenn Sie immer noch auf ein Problem stoßen, müssen Sie Folgendes tun:
Ich würde es nicht vorziehen, wenn Sie es direkt verwenden, da es die Ladezeit verlängert, da es eine große Anzahl von Operatoren enthält (nützliche und nicht nützliche), was gemäß den Industrienormen keine gute Praxis ist. Stellen Sie also sicher Sie versuchen zuerst, die oben genannten Importzeilen zu verwenden. Wenn dies nicht funktioniert, sollten Sie sich für rxjs / Rx entscheiden
quelle
Ich habe eine Lösung für dieses Problem
Installieren Sie dieses Paket:
Importieren Sie dann diese Bibliothek
Starten Sie dann endlich Ihr ionisches Projekt neu
quelle
Angular Version 6 "0.6.8" rxjs Version 6 "^ 6.0.0"
Diese Lösung ist für:
Wie wir alle wissen, wird Angular jeden Tag entwickelt, daher gibt es jeden Tag viele Änderungen. Diese Lösung ist für Angular 6 und RXJS 6 gedacht, die
zuerst mit http arbeiten. Sie sollten es importieren von: Schließlich müssen Sie das HttpModule in der App deklarieren. module.ts
und Sie müssen HttpModule zu Ngmodule hinzufügen -> Importe
Um mit der Karte zu arbeiten, sollten Sie zuerst die Pipe importieren:
Drittens benötigen Sie den Kartenfunktionsimport von:
Sie müssen die Karte in der Pipe wie folgt verwenden:
das funktioniert vollkommen viel glück!
quelle
Die Karte, die Sie hier verwenden, ist nicht
.map()
in Javascript, sondern die Rxjs-Kartenfunktion, an der gearbeitet wirdObservables
in Angular ...In diesem Fall müssen Sie es importieren, wenn Sie eine Karte für die Ergebnisdaten verwenden möchten ...
Importieren Sie es einfach so:
quelle
Da Http - Service in angular2 kehrt einen Observable - Typen, von Ihrem Angular2 Installationsverzeichnis ( ‚node_modules‘ in meinem Fall), müssen wir importieren Kartenfunktion der beobachtbaren in Ihrer Komponente mit http - Service, wie:
quelle
Winkel 6 - nur der Import von 'rxjs / Rx' hat den Trick für mich gemacht
quelle
Fügen Sie einfach die Zeile in Ihre Datei ein,
'rxjs / Rx' importieren;
Es werden eine Reihe von Abhängigkeiten importiert. In Winkel 5 getestet
quelle
RxJs hat seinen Kartenoperator zwar in einem separaten Modul getrennt, und jetzt müssen Sie ihn wie jeden anderen Operator explizit importieren.
import rxjs/add/operator/map;
und es wird dir gut gehen.
quelle
Der globale Import ist sicher.
'rxjs / Rx' importieren;
quelle
wird Ihr Problem lösen
Ich habe es in Angular 5.2.0 und RXJS 5.5.2 getestet
quelle
Dies geschieht, weil Sie die rxjs verwenden und die Funktion in rxjs nicht statisch ist. Dies bedeutet, dass Sie sie nicht direkt aufrufen können. Sie müssen die Methoden in der Pipe aufrufen und diese Funktion aus der rxjs-Bibliothek importieren
Wenn Sie jedoch rxjs-kompatibel verwenden, müssen Sie nur die rxjs-kompatiblen Operatoren importieren
quelle
Ich habe die folgenden Befehle ausprobiert und es wird behoben:
quelle
{map} aus 'rxjs / operator' importieren;
Das funktioniert bei mir in Winkel 8
quelle
Und was @ mlc-mlapis kommentiert hat, Sie mischen vermietbare Operatoren und die Patch-Methode für Prototypen. Verwenden Sie den einen oder anderen .
Für Ihren Fall sollte es sein
https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts
quelle