角度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数据没有得到显示在表

回答

相关问题