從webapi填充angular2-datatable

我目前正在嘗試在我的項目中使用angular2-datatable（從：https://www.npmjs.com/package/angular2-datatable），當我使用靜態.json文件做一個簡單的版本時，它可以工作。但是，當我試圖對我的WebAPI實現這一點時，它實際上並不顯示組件中的數據。從webapi填充angular2-datatable

在我的部分，我有以下幾點：

export class CurrentusersComponent implements OnInit { 
 

 
    public data; 
 
    public filterQuery = ""; 
 
    public rowsOnPage = 10; 
 
    public sortBy = "username"; 
 
    public sortOrder = "asc"; 
 

 
    currentusers: Currentuser[]; 
 

 

 
    constructor(private _http: Http, private _currentusersservice: CurrentusersService) {} 
 

 
    ngOnInit() { 
 
    //this loadCurrentUsersStatic works! 
 
    this.loadCurrentUsersStatic(); 
 

 
    //this loadCurrentUsersNonObservable Does not :(
 
    this.loadCurrentUsersNonObservable(); 
 
    } 
 

 
    loadCurrentUsersStatic() { 
 
    this._http.get("app/auth/sampledata/currentusers.json") 
 
     .subscribe((data) => { 
 
     setTimeout(() => { 
 
      this.data = data.json(); 
 
      console.log('getting data from a static file'); 
 
     }, 1000); 
 
     },); 
 
    } 
 

 
    loadCurrentUsersNonObservable() { 
 
    this._currentusersservice.getCurrentUsers().subscribe(
 
     data => { 
 
     setTimeout(() => { 
 
      this.data = data; 
 
      console.log(data); 
 
     }, 1000); 
 
     } 
 
    ); 
 
    }

這裏是組件模板的樣子：

<div class="panel panel-default"> 
 
    <div class="panel-heading">User information</div> 
 

 
    <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width: 20%"> 
 
      <mfDefaultSorter by="username">User Name</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 10%"> 
 
      <mfDefaultSorter by="logintime">Login Time</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 25%"> 
 
      <mfDefaultSorter by="sessionkey">Session Key</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 25%"> 
 
      <mfDefaultSorter by="currentpage">Current Page</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 10%"> 
 
      <mfDefaultSorter by="browser">Browser</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 5%"> 
 
      <mfDefaultSorter by="status">Status</mfDefaultSorter> 
 
     </th> 
 
     <th style="width: 5%">Action 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="let item of mf.data"> 
 
     <td>{{item.username}}</td> 
 
     <td>{{item.logintime}}</td> 
 
     <td>{{item.sessionkey}}</td> 
 
     <td>{{item.currentpage}}</td> 
 
     <td>{{item.browser}}</td> 
 
     <td>{{item.status}}</td> 
 
     <td></td> 
 
     </tr> 
 
    </tbody>

我currentusersservice如下所示：

@Injectable() 
 
export class CurrentusersService { 
 

 
    public data; 
 
    constructor(private _http: Http, private _cookieService: CookieService) {} 
 

 
    getCurrentUsers() { 
 
    return this._http.get('http://localhost:8888/api/currentusers') 
 
     .map((response: Response) => response.json()) 
 
     .map(body => body.Data); 
 
    }

當我看到最後的結果，我得到如下：

注意，在控制檯中，我將許多記錄看成是對象，甚至是表格都填充了許多行。所以我認爲我只是在將數據導入屏幕方面缺少一些東西。

在此先感謝！

來源

2017-05-02 CSharpNewb

Tr Ÿ擺脫'.map（body => body.Data）;'在您的服務 – Yevgen

您好Yevgen，這是不正確的。我的json實際上有多個組件，Data是一個包含我需要的信息數組的樹。不過謝謝。 – CSharpNewb

所以看起來ngFor /訪問JSON是大小寫敏感的：P

的數據變得可訪問時，我通過與這些電話改變了我的模板循環：

<tr *ngFor="let item of mf.data"> 
 
    <td>{{item.USERNAME}}</td> 
 
    <td>{{item.LOGINTIME}}</td> 
 
    <td>{{item.SESSIONKEY}}</td> 
 
    <td>{{item.CURRENTPAGE}}</td> 
 
    <td>{{item.BROWSER}}</td> 
 
    <td>{{item.STATUS}}</td> 
 
    <td></td> 
 
</tr>

我應該已經意識到這一點，當我看到對象的細節被標記爲全部大寫...

來源

2017-05-02 20:45:31 CSharpNewb

從webapi填充angular2-datatable

回答

相關問題