角度js中的数据表不起作用

Question

我正在使用以下步骤在 Angular js 中创建 DataTable

从 npm 安装 angular2-datatable

npm i -S angular2-datatable

编辑 app.module.ts 并导入以下代码

import { DataTableModule } from "angular2-datatable";

打开 app.component.ts 文件并添加以下脚本

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-daftar-user',
  templateUrl: './daftar-user.component.html',
  styleUrls: ['./daftar-user.component.css'],
})
export class DaftarUserComponent implements OnInit {
  obj: any = new Array({ name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" });
  userlist: any;
  constructor() {
  }
  ngOnInit() {
    this.userlist = this.obj;
  }
}

打开 app.component.html 文件并添加以下脚本

<div class="row margintop20px paddingtopbottom15px whitebackground">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table class="table table-striped table-hover table-bordered " [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="3">
        <thead>
          <tr>
            <th style="width:40px;max-width:40px;">#</th>
            <th style="width:60px;max-width:60px;"><mfDefaultSorter by="name">Name</mfDefaultSorter></th>
            <th><mfDefaultSorter by="email">Email</mfDefaultSorter></th>
            <th><mfDefaultSorter by="age">Age</mfDefaultSorter></th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of mf.data; let i = index;">
                <td scope="row">{{i+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
            </tr>
        </tbody>
        <tfoot>
          <tr>
              <td colspan="4">
                  <mfBootstrapPaginator ></mfBootstrapPaginator>
              </td>
          </tr>
          </tfoot>
      </table>
    </div>
  </div>
</div>

我已经使用上面的代码构建了一个数据表。当我尝试运行此代码时，它显示以下代码

编译失败。 ./node_modules/rxjs/_esm5/index.js 模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 '\sample-ng-app\node_modules\rxjs_esm5\index.js'。

我无法弄清楚我哪里出错了，你能为这个问题提供解决方案吗

编辑 包.json

{
  "name": "sample-ng-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular2-datatable": "^0.6.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Answer 1

您是否在app.module.ts 中导入您的@NgModul？
@NgModule({ imports: [ ... DataTableModule ], ... })

Answer 2

您的代码运行良好，但您必须更换

*ngFor="let user of mf.data; let i = index;"

到

*ngFor="let user of userlist; let i = index;"

这里一切都完成了..angular2-datatable-Example

Answer 3

我试过你的代码不显示数据。所以我对你的代码做了一些修改。

打字稿文件，

private obj: any =[
    { name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" }
  ];

private userlist: any[]=[];

constructor() {
    this.userlist=this.obj;
 }

HTML 文件，

<div class="col-md-6">
  <table class="table table-striped" [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
      <tr>
        <th style="width: 20%">
          <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="email">Email</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data">
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>
        <td>{{item.age}}</td>            
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

app.module.ts 文件

import {DataTableModule} from "angular2-datatable";

 imports: [
    DataTableModule
 ]

通过命令安装

npm i -S angular2-datatable

它工作正常。截图，

如果有任何错误请告诉我。