angle2-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... 
    }); 

あなたのインターフェースが正確に（ケースを含む）されていることを確認し、あなた返さアヤックスと同じデータとそれはすぐにフックする必要があります！