ошибка в угловых данных таблицы

Question

Я использую угловую таблицу данных, ссылка на репо: angular5-данных таблицы

при использовании пакета я получаю ошибки синтаксического анализа templatae:

Я включил пакет в модуль приложения, но все еще сталкиваюсь с проблемой:

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 package.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"
  }
}

Answer 1

Эта ошибка возникает, когда вы не импортируете модуль таблицы данных в module.ts или используете неверный тег в html. Я вижу, что есть только тег «таблица», но не «таблица данных», а просто директива import datatable внутри тега таблицы.

Answer 2

Возможно, что 'модуль таблицы данных' не добавлен в NgModule.

Проверьте эту документацию:

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