角度4數據沒有得到顯示在表

在angularjs 4嘗試一個例子來顯示引導表中的項目列表，我加載數據從.json文件，並試圖顯示使用引導表，表頭顯示正常，但數據沒有得到顯示讓我知道如果我犯錯誤角度4數據沒有得到顯示在表

下面是代碼，

下面是component.ts文件

import { Component, OnInit } from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 
import * as _ from "lodash"; 
 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'drivers-list', 
 
    templateUrl: './drivers-list.component.html', 
 
    
 
}) 
 
export class DriversListComponent implements OnInit { 
 
    public data: any[]; 
 
    public filterQuery = ""; 
 
    public rowsOnPage = 10; 
 
    public activePage = 1; 
 
    public sortBy = "email"; 
 
    public sortOrder = "asc"; 
 
    public itemsTotal = 0; 
 
    constructor(private http: Http) { 
 
    } 
 
    ngOnInit(): void { 
 
     this.loadData(); 
 
    } 
 
    
 
    public loadData() { 
 
     this.http.get("assets/data2.json") 
 
      .subscribe((data) => { 
 
       setTimeout(() => { 
 
    
 
        this.data = _.orderBy(data.json(), this.sortBy, [this.sortOrder]); 
 
        this.data = _.slice(this.data, (this.activePage-1)*this.rowsOnPage, (this.activePage-1)*this.rowsOnPage + this.rowsOnPage); 
 
        this.itemsTotal = data.json().length; 
 
       }, 2000); 
 
      }); 
 
    } 
 
    
 
    public toInt(num: string) { 
 
     return +num; 
 
    } 
 
    
 
    public sortByWordLength = (a: any) => { 
 
     return a.city.length; 
 
    }

下面是HTML文件的模板文件，

使用ngFor迭代行

來源

2017-08-09 Durga Prasad

嘗試'{{item？.id}}' – echonax

您可以嘗試在構造函數insOngOnInit中調用loadData（）。 – krzysztofla

@KrzysztofLa我會保持從不需要在那裏的構造函數：[OnInit]（https://angular.io/guide/lifecycle-hooks#oninit）***不要獲取數據組件構造函數。 [....]構造函數不應該只將初始局部變量設置爲簡單值*** – Alex

的自舉表https://github.com/wenzhixin/bootstrap-table/

<div class="col-md-auto"> 
 
    <div class="portlet light bordered"> 
 
     <div class="portlet-body"> 
 
      <table id="table-pagination" data-toggle="table" data-pagination="true" data-search="true"> 
 
       <thead> 
 
        <tr> 
 
         <th data-field="id" data-align="right" data-sortable="true">DRIVER</th> 
 
         <th data-field="name" data-align="center">LAST ACTIVE</th> 
 
         <th data-field="price" data-align="center">CYCLE</th> 
 
         <th data-field="price" data-align="center" data-sortable="true">GROUPS</th> 
 
         <th data-field="price" data-align="center" data-sortable="true">APP VERSION</th> 
 
         <th data-field="price" data-align="center" data-sortable="true">STATUS</th> 
 
         <th data-field="price" data-align="center" >ACTIONS</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="let item of data"> 
 
         <td>{{item.id}}</td> 
 
         <td>{{item.name}}</td> 
 
         <td class="text-right">{{item.price}}</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
</div>

不具有角4

工作開始使用下表

https://github.com/CasperTech/angular2-datatable-pagination

現在，每件事情都很好。

來源

2017-08-16 10:45:21

角度4數據沒有得到顯示在表

回答

相關問題