将 Angular material2 表与 http 服务结合使用

Question

我有一个http服务可以检索一些数据：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {
  constructor(private http: Http) { }
  getData(searchterm) {
      return this.http.get('http://localhost:3000/product/' + searchterm).map((res: Response) => res.json());
     }
}

我知道我想使用分页使用此服务从材料框架填充表格。

在示例中 https://material.angular.io/components/table/overview#pagination 读取文档时，他们在组件 ts 文件中使用自己的数据库来生成一些硬编码值。我尝试修改此代码以使用我的 http 服务，但由于我没有 100% 遵循示例流程（例如，我是否需要数据源或我可以将其取出？我正在寻找如何使用 http 服务填充表的最基本示例，然后允许分页。

到目前为止我尝试过：

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/merge';

import { MatPaginator, MatAutocompleteTrigger } from '@angular/material';
import { SearchService } from './../search.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  providers: [WorklistService, SearchService]
})
export class SearchComponent implements OnInit {
  @ViewChild(MatAutocompleteTrigger)
  autoTrigger: MatAutocompleteTrigger;
  displayedColumns = ['id', 'name'];
  dataSource = new ExampleDataSource();
  constructor() { }
  OnSearchEnterPressed(event) {
    this.dataSource.populateTable();
  }
}
export interface Data {
  id: string;
  name: string;
}
var httpdata: any[];
export class ExampleDataSource extends DataSource<any> {
  constructor() {
    super();
  }
  populateTable(searchterm) {
    this.searchService.getData('somevaluetotsendtotheservice').subscribe(data => {
      httpdata = data;
      this.connect();
    });
  }
  connect(): Observable<any[]> {
    return Observable.of(httpdata);
  }
  disconnect() { }
}

Answer 1

查看 GitHub 中的官方材料示例，这应该可以帮助您实现。这是链接： table-http