Использование таблицы Angular material2 со службой http

user2924127 спросил: 13 октября 2017 в 06:44 в: angular

У меня есть служба 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() { }
}

0 ответов