从FormGroup获取请求正文时如何在md-table中使用Http POST响应数据？

Question

我遵循了这个插件， 通过http检索数据 。 我想使用FormControl在POST请求正文中使用输入字段，并在md-table显示响应。

对我来说，问题是ExampleDatabase和ExampleDatabaseSource是单独的类。 我知道如何使用单独的服务在组件中执行常规的HTTP POST请求，但是我不知道如何将POST正文传递给ExampleDatabase进行Http调用或将完整的服务响应传递给ExampleDatabase，以便可以在表中显示？

我创建了我的意思的示例组件：

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像真正的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部分中进行切换，以加载模拟而不是真实的服务。