Angular 4 和 ngx-datatable：'ngx-datatable' 不是已知元素答案

【问题标题】：Angular 4 and ngx-datatable: 'ngx-datatable' is not a known elementAngular 4 和 ngx-datatable：'ngx-datatable' 不是已知元素
【发布时间】：2017-12-25 21:09:02
【问题描述】：

我尝试在我的 Angular 4 项目中使用 ngx-datatable 使用 system.js 加载模块，但它会引发如下错误：

无法绑定到“行”，因为它不是 ngx-datatable 的已知属性。
无法绑定到“列”，因为它不是 ngx-datatable 的已知属性。
ngx-datatable 不是已知元素：

我猜 system.js 没有正确加载模块，但我找不到有关如何执行此操作的工作演示。 documentation 也没有帮助。

system.config.js：

map: {
     ...
     '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
     ...
}

app.module.ts:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
...
imports: [
    ...
    NgxDatatableModule,
    ...
],

component.html：

<ngx-datatable
     [rows]="rows"
     [columns]="columns">
</ngx-datatable>

component.ts:

rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
];

package.json：

...
"@angular/animations": "^4.3.0",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/compiler-cli": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.3.0",
"@angular/http": "^4.3.0",
"@angular/platform-browser": "^4.3.0",
"@angular/platform-browser-dynamic": "^4.3.0",
"@angular/platform-server": "^4.3.0",
"@angular/router": "^4.3.0",
"@angular/upgrade": "4.3.0",
"@swimlane/ngx-datatable": "^9.3.1",
...

【问题讨论】：

你跑npm install了吗？

标签： javascript angular datatable systemjs ngx-datatable

【解决方案1】：

我遇到了同样的问题，通过运行解决了

ng update

但我不确定出了什么问题。

【讨论】：

【解决方案2】：

我安装它运行正常。请参考这个link

Please import in App.module.ts like below:

    import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
  imports: [
    NgxDatatableModule]});

请查看 App.component.html

 <ngx-datatable class="material"
            [rows]="rows"
            [columns]="column">
          </ngx-datatable>

【讨论】：

【解决方案3】：

在括号中，尝试在rows 或任何其他属性之前添加attr。应该是这样的[attr.rows]="rows"和[attr.columns]="columns"等等。

【讨论】：