Angular 4和ngx-datatable:'ngx-datatable'不是已知元素

时间:2017-07-20 09:05:11

标签: javascript angular datatable systemjs ngx-datatable

我尝试在使用system.js的angular 4项目中使用ngx-datatable来加载模块,但它会抛出这样的错误:

  

无法绑定到“行”,因为它不是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",
...

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

ng update

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

答案 2 :(得分:0)

我为我正确安装了它。 请参阅此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>