角4和NGX-數據表：「NGX-數據表」是不是一個已知元素

Question

我嘗試使用system.js加載模塊使用ngx-datatable在我的角度4項目，但它拋出的錯誤是這樣的：

由於它不是ngx-datatable的已知屬性，因此無法綁定到「行」。
無法綁定到'列'，因爲它不是ngx-datatable的已知屬性。
NGX-數據表是不是一個已知的元素：

我猜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", 
... 

Answer 1

在括號中，嘗試rows或任何其他屬性之前添加attr。 應該是這樣的[attr.rows]="rows"和[attr.columns]="columns"等等。