帶有服務器端數據的angular2-mdl表組件

Question

我嘗試使用Angular 2-Material Design Lite，尤其是使用表組件，但是我不知道如何在ajax請求中從服務器傳遞數據。 這是為表初始化提供的示例。 我如何將數據從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數據完全相同（包括大小寫），並且應該正確連接！