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使它变得有点困难，至少在目前的版本中。 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数据相同，并且它应该正确连接！

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

2 个答案: