Question

尝试使用angularjs 4中的示例来显示bootstrap表中的项目列表，我正在从.json文件加载数据并尝试使用bootstrap表显示表头正确显示但数据未显示我知道我是否犯了任何错误

这是代码，

下面是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文件模板文件

<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>

使用ngFor迭代行

Answer 1

引导程序表https://github.com/wenzhixin/bootstrap-table/无法使用角度4。

开始使用下表

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

现在一切都很好。

Angular 4数据未显示在表格中

1 个答案: