从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

回答

相关问题