angular2-mdl Tabellenkomponente mit serverseitigen Daten

Question

Ich experimentiere mit Angular 2 - Material Design Lite vor allem mit der Tabelle Komponente, aber ich kann nicht herausfinden, wie würde ich Daten vom Server auf Ajax Anfrage übergeben. Here ist das Beispiel für die Tabelleninitialisierung. Wie würde ich Daten von restAPI an die Tabellenkomponente übergeben?

Answer 1

Hier habe ich eine Art Arbeitsbeispiel. Ich habe die ersten Daten in meine Component-Init-Methode eingegeben, wo ich den DataService aufruft, der die Tabelle auffüllt. Ich bin mir nicht sicher, ob die richtige Problemumgehung ist, aber an diesem Punkt habe ich Daten in der Tabelle.

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 machte es ein wenig schwieriger als es sein musste, zumindest mit der aktuellen Version. Die Magie des als Schlüsselworts kann das schwere Anheben erledigen.

Zum Beispiel meiner Klasse Setup wie folgt aussehen:

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'} 
    ]); 

Dann in meinem Ajax-Aufruf Ich habe:

...ajax call here).subscribe(value => { 
    const messages = value as Array<IUnreadMessage>; 
    this.unreadMessagesTable.addAll(messages); 
    }, 
    error => { 
    ...error handler here... 
    }); 

Stellen Sie sicher, Ihre Schnittstelle GENAU ist (einschließlich Fall) die gleichen wie Ihr zurück Ajax Daten und es sollte genau richtig sein!