Rest 带有服务器端数据的angular2 mdl表组件

我特别尝试使用table组件，但我不知道如何根据ajax请求从服务器传递数据。提供了表格初始化的示例。

---

如何将数据从restAPI传递到表组件？

这里我有一个工作示例。我将初始数据放在我的Component Init方法中，在那里我调用填充表的DataService。我不确定这是否是正确的解决方法，但在这一点上，我有表中的数据

import { Component, ViewChild, ViewContainerRef, OnInit, Pipe, PipeTransform } from '@angular/core';
import { MdDialog, MdDialogConfig, MdIcon } from "@angular/material";
import { AuthenticationService, DialogsService, DataService } from '../../../services/';
import { RouterModule, Routes, Router } from '@angular/router';
import {
    IMdlTableModelItem,
    MdlDefaultTableModel
} from 'angular2-mdl';


export interface ITableItem extends IMdlTableModelItem {
    username: string;
    email: string;
    role: string;
    unitPrice: number;
}

@Component({
    selector: 'employees',
    templateUrl: 'app/layouts/secure/employees/employees.html',
    providers: [DialogsService, MdIcon]
})
export class EmployeesComponent implements OnInit {
    public message: string;
    public employees: any[];
    public result: any;
    public showSearchBar: false;
    public tableData:[ITableItem];
    public selected;

    public tableModel = new MdlDefaultTableModel([
        {key:'username', name:'Username', sortable:true},
        {key:'email', name:'Email', sortable:true},
        {key:'role', name:'Role', sortable:true},
        {key:'status', name:'Status', sortable:true},
        {key:'unitPrice', name:'Test', numeric:true}
    ]);

    constructor(
        private dialogsService: DialogsService,
        public viewContainerRef: ViewContainerRef,
        private _dataService : DataService,
        private router: Router
    ) {
    }
    openDialog() {
        this.dialogsService
            .confirm('User Form', 'Are you sure you want to do this?', this.viewContainerRef)
            .subscribe(res => this.result = res);
    }

    toggleSearch() {
        console.log(this)
    }

    ngOnInit() {
        var self = this;
        this._dataService
            .GetAll('employees')
            .subscribe( data => {
                    data = Object.keys(data).map((key)=>{ return data[key]})
                    this.employees = data;
                    this.tableData  = data;
                    this.tableModel.addAll(this.tableData);

            }, error => console.log(error),
                () => function ( data ) {
                    this.tableData  = this.employees;
                    this.tableModel.addAll(this.tableData);
                    this.selected = this.tableData.filter( data => data.selected);
                },
            );
    }
    generateArray(obj){
        return Object.keys(obj).map((key)=>{ return obj[key]});
    }

    selectionChanged($event){
        this.selected = $event.value;
    }
}

---

@fefe使它比必须的要困难一些，至少在当前版本中是这样。as关键字的魔力可以完成繁重的工作

例如，我的类设置如下所示：

import...

export interface IUnreadMessage extends IMdlTableModelItem {
    messageId: number;
    subject: string;
    from: string;
}

@Component ...

export class ...
    private unreadMessagesTable = new MdlDefaultTableModel([
        {key: 'messageId', name: 'Message ID'},
        {key: 'subject', name: 'Subject'},
        {key: 'from', name: 'From'}
    ]); 

在我的ajax调用中，我有：

 ...ajax call here).subscribe(value => {
    const messages = value as Array<IUnreadMessage>;
    this.unreadMessagesTable.addAll(messages);
  },
  error => {
    ...error handler here...
  });

…此处调用ajax）。订阅（值=>{
const messages=作为数组的值；
this.unreadMessageTable.addAll（消息）；
},
错误=>{
…此处的错误处理程序。。。
});

确保您的界面（包括case）与返回的ajax数据完全相同，并且应该立即连接