Question

我在项目中创建了自定义组件DisplayTableComponent。我想在我的数据上加入Angular 4数据表以供显示。

DisplayTableComponent.TS如下

import { Component, OnInit } from '@angular/core';
import { DataTableResource } from 'angular-4-data-table';
import { DataTableModule } from 'angular-4-data-table';
import persons from './data-table-demo1-data';

@Component({
  selector: 'app-display-table',
  templateUrl: './display-table.component.html',
  styleUrls: ['./display-table.component.css']
})
export class DisplayTableComponent implements OnInit {

  itemResource = new DataTableResource(persons);
  items = [];
  itemCount = 0;
    constructor() {

      this.itemResource.count().then(count => this.itemCount = count);
    }
    ngOnInit() {


    }
    reloadItems(params) {
       // this.itemResource.query(params).then(items => this.items = items);
    }

    // special properties:
    rowClick(rowEvent) {
        console.log('Clicked: ' + rowEvent.row.item.name);
    }

    rowDoubleClick(rowEvent) {
        alert('Double clicked: ' + rowEvent.row.item.name);
    }

    rowTooltip(item) { return item.jobTitle; } 

}

我的Html模板如下

    <p>
  display-table works!
</p>
<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
  <data-table id="persons-grid"
      headerTitle="Employees"
      [items]="items"
      [itemCount]="itemCount"
      (reload)="reloadItems($event)"

      (rowClick)="rowClick($event)"
      (rowDoubleClick)="rowDoubleClick($event)"
      [rowTooltip]="rowTooltip"
      >
      <data-table-column
          [property]="'name'"
          [header]="'Name'"
          [sortable]="true"
          [resizable]="true">
      </data-table-column>
      <data-table-column
          [property]="'date'"
          [header]="'Date'"
          [sortable]="true">
          <ng-template #dataTableCell let-item="item">
              <span>{{item.date | date:'yyyy-MM-dd'}}</span>
          </ng-template>
      </data-table-column>
      <data-table-column
          property="phoneNumber"
          header="Phone number"
          width="150px">
      </data-table-column>
      <data-table-column
          [property]="'jobTitle'"
          [header]="'Job title'"
          [visible]="false">
      </data-table-column>
      <data-table-column
          [property]="'active'"
          [header]="'Active'"
          [width]="100"
          [resizable]="true">
          <ng-template #dataTableHeader let-item="item">
              <span style="color: rgb(232, 0, 0)">Active</span>
          </ng-template>
          <ng-template #dataTableCell let-item="item">
              <span style="color: grey">
              <span class="glyphicon glyphicon-ok" *ngIf="item.active"></span>
              <span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span>
              </span>
          </ng-template>
      </data-table-column>
  </data-table>
</div>

现在，临时源数据文件（data-table-demo1-data.ts）为

export default [
    { 'name': 'Aaron 2Moore', 'email': 'aaa@aa.com', 'jobTitle': 'Regional Configuration Producer',
      'active': true, 'phoneNumber': '611-898-6201', 'date': '2015-11-06T07:21:25.510Z' },
    { 'name': 'Yvonne Conroy Mrs.', 'email': 'sss@ssss.com', 'jobTitle': 'Global Mobility Orchestrator',
      'active': false, 'phoneNumber': '115-850-0969', 'date': '2014-12-20T00:48:40.276Z' },
]

我的app.Module.TS如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { DataTableModule } from 'angular-4-data-table';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MovieComponent } from './movie/movie.component';
import { DisplayTableComponent } from './display-table/display-table.component';

const appRoute: Routes =[
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {path:'home', component:HomeComponent}, 
  {path:'Movie', component:MovieComponent},
  {path:'table', component:DisplayTableComponent},


];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MovieComponent,
    DisplayTableComponent
  ],
  imports: [
    BrowserModule,

    RouterModule.forRoot(appRoute)
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

你能帮我吗？我收到了以下错误

ERROR in ./node_modules/angular-4-data-table/src/index.ts
Module build failed: Error: C:\projects\Handson\website1\node_modules\angular-4-data-table\src\index.ts is missing from the TypeScript compilation. Please make sure
it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format 
    at AngularCompilerPlugin.getCompiledFile (C:\projects\Handson\website1\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:656:23)
    at plugin.done.then (C:\projects\Handson\website1\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/display-table/display-table.component.ts 13:29-60
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Answer 1

您似乎正在使用angular 5 cli并需要将Angular 4 Data表集成到您的项目中。我的建议是使用angular5-data-table而不是版本4如果你使用角度5.你可以在https://www.npmjs.com/package/angular5-data-table上找到它

Angular 4数据表实现到我的APP中

1 个答案: