[英]angular2-mdl table component with server side data
I experiment with Angular 2 - Material Design Lite especially with the table component but I can not figure out how would I pass data from server on ajax request. 我尝试使用Angular 2-Material Design Lite,尤其是使用表组件,但是我不知道如何在ajax请求中从服务器传递数据。 Here is the example provided for table initialisation.
这是为表初始化提供的示例。 How would I pass data from restAPI to table component?
我如何将数据从restAPI传递到表组件?
Here I have a kind of working example. 在这里,我有一个可行的例子。 I placed the initial data on my Component Init method where I call the DataService which populates the table.
我将初始数据放在Component Init方法上,在其中调用填充表的DataService。 I'm not sure if is the right workaround but at this point I have data in table.
我不确定是否是正确的解决方法,但目前我的表中有数据。
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 made it a little more difficult than it had to be, at least with the current version. @fefe使它比原来要困难的多,至少在当前版本中是如此。 The magic of the as keyword can do the heavy lifting.
as关键字的魔力可以减轻负担。
For example my class setup looks like: 例如,我的课程设置如下:
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'}
]);
Then in my ajax call I have: 然后在我的ajax电话中,我有:
...ajax call here).subscribe(value => {
const messages = value as Array<IUnreadMessage>;
this.unreadMessagesTable.addAll(messages);
},
error => {
...error handler here...
});
Make sure your interface is EXACTLY (including case) the same as your returned ajax data and it should hook right up! 确保您的界面与返回的ajax数据完全相同(包括大小写),并且应该正确连接!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.