FormGroupからリクエスト本文を取得している間にmd-tableのHttp POSTレスポンスデータを使用するには？

Question

私はretrieving data through httpのためにプランジャに従った。 FormControlを使用してPOSTリクエストの本文に入力フィールドを使用し、応答をmd-tableに表示したいとします。

私の問題はExampleDatabaseとExampleDatabaseSourceが別のクラスです。私は通常のhttp POST要求を別のサービスを使用してコンポーネントで行う方法を知っていますが、ExampleDatabaseにPOST本体を渡してHttp呼び出しを行うか、完了したサービス応答をExampleDatabaseに渡してテーブルに表示する方法がわかりません。ここで

のplnkrです：

UPDATEがすべてで、これは素晴らしいことだ行う方法について

import {Component} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; 
import {DataSource} from '@angular/cdk'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 

import {TestService} from './service' 

@Component({ 
    selector: 'md-table-question', 
    templateUrl: 'md-table-question.html', 
}) 
export class MdTableQuestion { 

    displayedColumns = ['id']; 
    exampleDatabase: ExampleDatabase | null; 
    dataSource: ExampleDataSource | null; 
    form: FormGroup; 

    constructor(private _testService: TestService, private _fb: FormBuilder) { 
    this.exampleDatabase = new ExampleDatabase(); 
    this.dataSource = new ExampleDataSource(this.exampleDatabase); 
    } 
    ngOnInit() { 
     this.form = this._fb.group({ 
      name:['', Validators.compose([ 
       Validators.required 
       ])], 
       ]},  
    ); 

// Here is the submit form that sends POST request. It comes from an ngSubmit event: 
    submitForm(){ 
    let body= {name:this.form.get('name').value} 
    this._testService.testRequest(body) 
      .subscribe(res => { 
      console.log(res); 
      }) 
    } 
} 
export interface test { 
    id: number; 
} 

export class ExampleDatabase { 
    dataChange: BehaviorSubject<test[]> = new BehaviorSubject<test[]>([]); 
    get data(): test[] { 
// Not sure how to get data to here 
    // let data = 
    // return data; 
    } 
    constructor() { 
    this.dataChange.next(this.data); 
    } 
}; 

export class ExampleDataSource extends DataSource<any> { 
    constructor(private _exampleDatabase: ExampleDatabase) { 
    super(); 
    } 
    connect(): Observable<test[]> { 
    return this._exampleDatabase.dataChange; 
    } 
    disconnect() {} 
} 
} 

すべてのヘルプ：

は、私が何を意味するかの例コンポーネントを作成しました問題は

Answer 1

早急に提案したいのは、あなたがあなたのserviceは真のサービスと似ており、テストと実装の両方の目的でサンプルデータをアプリケーションに提供するために、そのバージョンをmockに実装します。

interface IExampleService { 
    get(id: number): Observable<ExampleResult> 
} 

@Injectable() ExampleService implements IExampleService { 
    get(id: number): Observable<ExampleResult> { 
     return Observable.of({}) // empty object 
    } 
} 

@Injectable() MockExampleService implements IExampleService { 
    get(id: number): Observable<ExampleResult> { 
     return blablabla // Return an observable with your expected test data. 
    } 
} 

その後、モックの代わりに、実際のサービスをロードするために、あなたのモジュールprovidersセクションでこれを切り替えることができます。