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

Question

我尝试过Angular 2 - Material Design Lite，尤其是表组件，但是我不知道如何在ajax请求中从服务器传递数据。Here是为表初始化提供的示例。如何将数据从restAPI传递到表组件？

Answer 1

这里我有一个工作的例子。我将初始数据放在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;
    }
}

Answer 2

@fefe让它变得比以前更难了，至少在当前版本中是这样。作为关键字的的魔力可以完成繁重的任务。

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

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数据完全相同，并且应该直接挂钩！