角度数据表抛出错误答案

【问题标题】：angular data table throws error角度数据表抛出错误
【发布时间】：2018-04-26 12:05:49
【问题描述】：

我正在使用指向 repo 的角度数据表链接是： angular5-data-table

在使用包时，我遇到模板解析错误：

我已将包包含在 app 模块中，但仍然遇到问题：

app.component.ts

 import { Component } from '@angular/core';
import { DataTableResource } from 'angular5-data-table';
import persons from './data-table-demo1-data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  itemResource = new DataTableResource(persons);
  items = [];
  itemCount = 0;

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

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

app.component.html

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

我也尝试将包包含在我的 app.module.ts 中，但没有任何效果我正在使用 angular5 包.json

  {

  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular5-data-table": "^0.5.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

【问题讨论】：

标签： angular datatables

【解决方案1】：

当您没有在 module.ts 中导入数据表模块或在 html 中使用错误的标签时，会出现此错误。我看到只有标签“table”而不是“data-table”，只是在 table 标签内导入 datatable 指令。

【讨论】：

【解决方案2】：

“数据表模块”可能没有添加到 NgModule 中。

查看此文档：

http://www.devglan.com/angular/angular-data-table-example

【讨论】：