當沒有編寫 api 時，如何在 Angular2 中模擬 http observable

Question

我是 Angular2 和 Rxjs 的新手，我對特定情況有點困惑。

我有一個簡單的服務：

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

這按預期工作，但我想要做的是能夠在沒有 api 端點的情況下開發我的服務，並使用 Observable 稍后我可以將其http.request 。 我嘗試使用 Observable.from 將虛擬數據數組轉換為 observable 來執行此操作，但出現錯誤

Type '{ id: number; title: string; content: string; author: string; }' is not assignable to type 'Article[]'

我相信這是因為它分別返回每個項目而不是數組，有人可以指出我應該如何工作的正確方向

更新：為清楚起見，dummyData 如下所示：

private dummyData = [
      {
        id: 1,
        title: 'Title 1',
        content: 'content 1',
        author: 'author 1'
      },
      {
        id:2,
        title: 'Title 2',
        content: 'content 2',
        author: 'author 1'
      }
    ];

Answer 1

更新 1

來自https://angular.io/guide/deprecations#http

@ANGULAR/HTTP/TESTING 在@ANGULAR/COMMON/HTTP/TESTING 中最接近的替換
MockBackend ==> HttpTestingController
MockConnection ==> HttpTestingController

原創

您可以使用MockBackend

 import {BaseRequestOptions, Http} from '@angular/http'; import {MockBackend} from '@angular/http/testing'; it('should get some data', inject([AsyncTestCompleter], (async) => { var connection; var injector = Injector.resolveAndCreate([ MockBackend, {provide: Http, useFactory: (backend, options) => { return new Http(backend, options); }, deps: [MockBackend, BaseRequestOptions]}]); var http = injector.get(Http); var backend = injector.get(MockBackend); //Assign any newly-created connection to local variable backend.connections.subscribe(c => connection = c); http.request('data.json').subscribe((res) => { expect(res.text()).toBe('awesome'); async.done(); }); connection.mockRespond(new Response('awesome')); }));

更新

像這樣定義dummyData ：

private dummyData = {
  json: function() {
    return [
      {
        id: 1,
        title: 'Title 1',
        content: 'content 1',
        author: 'author 1'
      },
      {
        id:2,
        title: 'Title 2',
        content: 'content 2',
        author: 'author 1'
      }
    ]};
}