如何将md表与Angular 4中的服务一起使用

我是一个全新的角度世界，我正在尝试在角度材质2中使用新的md表格组件和角度材质4

我从一个API中创建了一个服务，它检索简单的内容数组。 现在，我尝试使用此服务作为md表的数据源，但我找不到从该服务获取数据的方法（它总是返回一个空数组）

请注意，在使用md表之前，我已经在使用该服务，并且它工作正常

以下是组件的代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import {DataSource} from '@angular/cdk';
import {MdPaginator} from '@angular/material';
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 { GroupService } from '../shared/group.service';
import { Group } from '../shared/group';

@Component({
  selector: 'app-group-list',
  templateUrl: './group-list.component.html',
  styleUrls: ['./group-list.component.css'],
  providers: [GroupService]
})
export class GroupListComponent implements OnInit{

  public DisplayedColumns = ['name', 'email', 'directMembersCount'];
  public groupDatabase = new GroupDatabase();
  public dataSource : CustomDataSource | any;

  @ViewChild(MdPaginator) paginator : MdPaginator;

  constructor() {}

  ngOnInit() {
    this.dataSource = new CustomDataSource(this.groupDatabase, this.paginator);
    console.log(this.dataSource);
  }

}

export class GroupDatabase implements OnInit {

  public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
  get data(): Group[] { return this.dataChange.value }

  private _groupService : GroupService

  private getAllGroups(){
    return this._groupService
      .getAllGroups();
  }

  constructor (){}

  ngOnInit() {
      this.getAllGroups();
      console.log(this.getAllGroups());
  }
}

export class CustomDataSource extends DataSource<any> {

  constructor(private _groupDatabase = new GroupDatabase(), private _paginator: MdPaginator){
    super();
  }

  connect(): Observable<Group[]> {
    const displayDataChanges = [
      this._groupDatabase.dataChange,
      this._paginator.page
    ];
    return Observable.merge(...displayDataChanges).map(() => {
      const data = this._groupDatabase.data.slice();
      console.log(data);

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从'@angular/cdk'导入{DataSource}；
从“@angular/material”导入{MdPaginator}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/startWith'；
导入“rxjs/add/observable/merge”；
导入'rxjs/add/operator/map'；
从“../shared/group.service”导入{GroupService}；
从“../shared/Group”导入{Group}；
@组成部分({
选择器：“应用程序组列表”，
templateUrl:'./group list.component.html'，
样式URL:['./组列表.component.css']，
提供者：[集团服务]
})
导出类GroupListComponent实现OnInit{
public DisplayedColumns=['name'、'email'、'directMembersCount']；
public groupDatabase=新的groupDatabase（）；
公共数据源：CustomDataSource | any；
@ViewChild（MdPaginator）分页器：MdPaginator；
构造函数（）{}
恩戈尼尼特（）{
this.dataSource=新的CustomDataSource（this.groupDatabase，this.paginator）；
console.log（this.dataSource）；
}
}
导出类GroupDatabase实现OnInit{
公共数据更改：BehaviorSubject=新的BehaviorSubject（[]）；
get data（）：组[]{返回this.dataChange.value}
private\u groupService:groupService
私有getAllGroups（）{
返回此。\u groupService
.getAllGroups（）；
}
构造函数（）{}
恩戈尼尼特（）{
这是getAllGroups（）；
log（this.getAllGroups（））；
}
}
导出类CustomDataSource扩展了DataSource{
构造函数（private _groupDatabase=new groupDatabase（），private _paginator:MdPaginator）{
超级（）；
}
connect（）：可观察{
const displayDataChanges=[
这是._groupDatabase.dataChange，
这是._paginator.page
];
返回可观察的.merge（…displayDataChanges）.map（（）=>{
const data=this._groupDatabase.data.slice（）；
控制台日志（数据）；
const startIndex=this.\u paginator.pageIndex*this.\u paginator.pageSize；
返回数据拼接（startIndex，this.\u paginator.pageSize）；
})
}
断开连接（）{}
}

以下是HTML的代码：

<md-table #table [dataSource]="dataSource">

  <ng-container *cdkColumnDef="name">
    <md-header-cell *cdkCellDef>Nom</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
  </ng-container>

  <ng-container *cdkColumnDef="email">
    <md-header-cell *cdkCellDef>Email</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
  </ng-container>

  <ng-container *cdkColumnDef="directMembersCount">
    <md-header-cell *cdkCellDef>Nombre de membres</md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.directMembersCount}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: DisplayedColumns;"></md-row>

</md-table>

<md-paginator #paginator
              [length]="groupDatabase.data.length"
              [pageIndex]="0"
              [pageSize]="25"
              [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>

笔名
{{row.name}
电子邮件
{{row.email}
名称：membres
{{row.directmemberscont}

及有关服务:

private groupApiUrl: string;
  private groupsApiUrl: string;
  private headers: Headers;
  constructor(public http:Http, private config: Config) {
    this.groupApiUrl = config.serverWithApi + "group";
    this.groupsApiUrl = config.serverWithApi + "groups";

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
  }

  public getAllGroups = (): Observable<Group[]> => {
    return this.http.get(this.groupsApiUrl)
      .map((response: Response) => <Group[]>response.json())
      .catch(this.handleError)
  }

private-groupapirl:string；
私有组SAPIURL：字符串；
私有头：头；
构造函数（公共http:http，私有config:config）{
this.groupapirl=config.serverWithApi+“group”；
this.groupsApiUrl=config.serverWithApi+“groups”；
this.headers=新的headers（）；
this.headers.append（'Content-Type'，'application/json'）；
append（'Accept'，'application/json'）；
}
公共getAllGroups=（）：可观察=>{
返回this.http.get（this.groupsApiUrl）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）
}

我不确定应该如何使用数据源调用服务，这就是为什么我像以前那样做的原因；使用ngOnInit方法

---

感谢您的帮助。

以下是通过HTTP检索数据的示例：

---

您缺少一个

GroupDatabase

未将任何数据值放入

dataChange

流的片段。它是一个

BehaviorSubject

，以空数组开头，但不在其上放置更多数据。这就是为什么表只接收空数组的原因

首先，要知道Angular不会调用

ngOnInit

，因为

GroupDatabase

不是指令，也不是变更检测周期的一部分

相反，将

this.getAllGroups（）

移动到

GroupDatabase

的构造函数中。然后订阅其结果：

export class GroupDatabase {
  public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
  get data(): Group[] { return this.dataChange.value }

  constructor(groupService: GroupService) {
    groupService.getAllGroups().subscribe(data => this.dataChange.next(data));
  }
}

---

看来不止我一个人在想这个！angular repo上已经发布了一个关于这一点的问题：angular.io网站上似乎没有专门针对DataSource的任何文档，它只是在讨论其他主题时才被引用，例如cdk表。在用户执行搜索后填充数据源是我一直关注的问题。谢谢您的回答。这确实解决了我的问题，但医生真的让我困惑！使用GroupDatabase的第一个方法，如何/何时传入服务？有关问题的更多详细信息，请参阅我的问题，并查看我的尝试。@Andrew:我正在遵循您在Plunker上的示例，该示例在

GitHub API

上运行良好，但当我更改URL并添加我的

http://localhost:4000/users

，我得到以下错误：

错误类型错误：t.json（…）.map不是一个函数

。我假设它影响了这部分代码：

returnresult.json（）.map（issue=>{return{….}）。你知道那里应该修什么吗？谢谢。@k.vincent这基本上意味着你的
t
格式不正确。您是否尝试过记录
t
？它是什么类型的？
export class CustomDataSource extends DataSource<Group> {

  constructor(
      private _groupService: GroupService, 
      private _paginator: MdPaginator) { }

  connect(): Observable<Group[]> {
    const displayDataChanges = [
      this._groupService.getAllGroups(),
      this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map((data, page) => {
      const clonedData = data.slice();

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}