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

使用带有http服务的Angular material2表

1 个答案: