Wie kann ein mock ein http, erkennbar im Angular2, wenn keine api geschrieben
Ich bin neu sowohl Angular2 und Rxjs und ich bin ein wenig verwirrt über einen bestimmten Fall.
Ich habe einen einfachen service:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { Http, Response } from '@angular/http';
export interface Article {
id: number;
title: string;
content: string;
author: string;
}
@Injectable()
export class ArticleService {
private _articles$: Subject<Article[]>;
private baseUrl: string;
private dataStore: {
articles: Article[]
};
constructor(private http: Http) {
this.baseUrl = 'http://localhost:3000'
this.dataStore = { articles: [] };
this._articles$ = <Subject<Article[]>>new Subject();
}
get articles$(){
return this._articles$.asObservable();
}
loadAll(){
//Observable.from(this.dummyData)
this.http.get(`${this.baseUrl}/articles`)
.map(response => response.json())
.subscribe(data => {
//debugger;
this.dataStore.articles = data;
//Push a new copy of our article list to all Subscribers.
this._articles$.next(this.dataStore.articles)
}, error => console.log('Could not load Articles'));
}
}
Und dies funktioniert wie erwartet , aber das, was ich möchte zu tun ist, um in der Lage sein zu entwickeln, meinen Dienst ohne api-Endpunkt und mit einer Beobachtbaren, dass ich später die swap für die http.request
. Ich habe versucht, dies zu tun mit Beobachten.von konvertieren eine dummy-Daten-Arrays zu einem beobachtbaren, aber ich bekomme den Fehler
Type '{ id: number; title: string; content: string; author: string; }' is not assignable to type 'Article[]'
Ich glaube, das ist, weil es ist die Rückkehr jedes Element getrennt statt des Arrays , kann mir jemand zeigen in die richtige Richtung, wie das funktionieren sollte
Update:
für die Klarheit die dummyData Aussehen:
private dummyData = [
{
id: 1,
title: 'Title 1',
content: 'content 1',
author: 'author 1'
},
{
id:2,
title: 'Title 2',
content: 'content 2',
author: 'author 1'
}
];
- Ich bin mir nicht sicher, die Umsetzung, die Sie suchen, aber loadAll() könnte wahrscheinlich nur loadAll() { dieses._article$.neben([Artikel, Artikel]); }
- so war ich zusammen mit coryrylan.com/blog/angular-2-observable-data-services und er hat eine api, ich war gerade dabei, zu überlegen, wie ich vermeiden könnte, die eine http-Anfrage aber weiterhin die Entwicklung mit einer Beobachtbaren, wo ich konnte nur sub in ` diesem.http.get('${dies.baseUrl}/Artikel')` später mit einer geraden swap
- Werden Sie abonnieren, um eine beobachtbare oder so. Ist es nicht egal, wie die Daten geschoben wird, ist in der beobachten. Es sollte ein sauberer swap. Wenn Sie behalten möchten die
this.http
nennen, ich würde vorschlagen, den in-memory-api -npmjs.com/package/angular2-in-memory-web-api - das problem ist, wenn ich
this.http.get('${this.baseUrl}/articles').map(response => response.json())
zuObservable.from(this.dummyData)
bekomme ich die build-Fehler, die oben erwähnt alsoType '{ id: number; title: string; content: string; author: string; }' is not assignable to type 'Article[]'
- Warum benennst du deine var wie diese
_articles$
? - das Dollar-Zeichen ist, weil es einen beobachtbaren und der Unterstrich ist, weil es ist privat und hat eine getter -
articles
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie
MockBackend
Update
Definieren die
dummyData
wie:Observable
kann nicht verwenden Sie die gleiche abonnieren? Sie bedeutet, dass man die Nutzlast mitdata.json()
. Was ist der Zweck? Sie können auchMockBackend
im normalen code oderInMemoryBackendService
in angular.io/docs/ts/latest/tutorial/toh-pt6.htmlObservable.from(this.dummyData)
stattthis.http.get('${this.baseUrl}/articles').map(..)
aber die Art genannte Fehler in FrageObservable.from(this.dummyData)
? diese.summyData ist ein array.Observable.from(this.dummyData)
zuObservable.create(()=> { return this.dummyData} )
konnte ich das Ergebnis bekommen, das ich wollte. DankeObservable.create(observer => { observer.next(this.dummyData); });