Ng2表格不支持最新的Angular2版本 [英] Ng2-table not working with latest Angular2 version
问题描述
目前我正在使用Angular2作为我的应用程序，现在我想将ng2-table添加到我的组件中。
ng2-Table on Git
我收到这个错误，不禁要问：
angular2-polyfills.js：487未处理的Promise拒绝：模板解析错误：
由于它不是'ng-table'的已知属性，因此无法绑定到'colums'。
1.如果'ng-table'是一个Angular组件并且它有'colums'输入，那么
会验证它是否是该模块的一部分。
2.如果'ng-table'是一个Web组件，则将CUSTOM_ELEMENTS_SCHEMA
添加到此组件的'@ NgModule.schema'中以禁止此消息。
（
< / div> - >
< ng-table [错误 - >] [colums] =columns[rows] =rows> < / ng-table>
< div class =>
）：DeviceOverviewComponent @ 18：10;
区域：< root> ;任务：Promise.then;值：错误：模板解析错误：（...）
在我的html中，我得到了这个：
< ng-table [columns] =columns[rows] =rows> < / NG-表>
我的组件是这样的：
从'@ angular / core'导入{Component};
从'@ angular / router'导入{Router};
从'../services/device.service'中导入{DeviceService};
$ b @Component（{
selector：'device-overview'，
templateUrl：'dist / html / deviceoverview.component.html'，
提供者：[DeviceService]，
}）
导出类DeviceOverviewComponent {
devices：any;
列：任何;
行：任何;
构造函数（私有deviceService：DeviceService，私有路由器：Router）{
}
loadDevices（）{
this.deviceService.getDevices（）
。 （（data）=> {
this.devices = data
this.rows = this.devices
}）
}
goToDevice（ deviceName：string）{
this.router.navigateByUrl（'/ devices /'+ deviceName）
}
ngOnInit（）{
this.columns = [
{title：test，name：id}]
this.loadDevices（）;
}
}
我的app.module是：
从'@ angular / core'导入{NgModule};
从'@ angular / common'导入{LocationStrategy，HashLocationStrategy};
从'@ angular / platform-browser'导入{BrowserModule};
从'@ angular / forms'导入{FormsModule};
从'@ angular / http'导入{HttpModule};
从'ng2-table / ng2-table'导入{Ng2TableModule};
从'./components/app.component'导入{AppComponent};
从'./components/deviceoverview.component'中导入{DeviceOverviewComponent}
从'./services/device.service'导入{DeviceService};
从'./app.routing'导入{routing};
@NgModule（{
imports：[
Ng2TableModule，
BrowserModule，
FormsModule，
HttpModule，
routing，
]，
声明：[
DeviceOverviewComponent，
AppComponent，
]，
提供者：
[
{提供：LocationStrategy，useClass：HashLocationStrategy}，
DeviceService，
$ b $，
bootstrap：[AppComponent]
}）
export class AppModule {}
有人知道ng2-table的用法吗？或者是否有一个有效的替代方案，因为演示页面/使用文档现在还不可用？
我找到了一些替代方案，但他们中的很多人最后一次提交了很长时间这可能是一个问题，因为我总是使用最新的Angular2。
感谢阅读和任何帮助！
编辑：
我已经迈出了下一步！
我需要在'@ b
$ b
import {CUSTOM_ELEMENTS_SCHEMA} $ {$，
schemas：[CUSTOM_ELEMENTS_SCHEMA]，
}）
在我的app.module.ts中
现在我得到带有test列和ID属性的表头我的行数据显示正确。
即使是来自ng2-table的演示也没有这个导入。
我想现在的文档和演示版并不适用于新版本。 ：/ b>
我在你的html中看到一个错字：
[colums] =columns
p>
[columns] =columns
您缺少 n
Plunker Example （我也在本地机器上试过了，它能正常工作）
您不应该使用CUSTOM_ELEMENTS_SCHEMA
$ b systemjs.config.js
地图：{
...
'ng2-table'：'npm：ng2-table'
}，
包裹：{
...
'ng2-table'：{
defaultExtension：'js'
}
}
I am currently using Angular2 for my application and now I want to add ng2-table to my component. ng2-Table on Git
I am getting this error and couldn't help but ask:
angular2-polyfills.js:487 Unhandled Promise rejection: Template parse errors:
Can't bind to 'colums' since it isn't a known property of 'ng-table'.
1. If 'ng-table' is an Angular component and it has 'colums' input, then
verify that it is part of this module.
2. If 'ng-table' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
to the '@NgModule.schema' of this component to suppress this message.
("
</div>-->
<ng-table [ERROR ->][colums]="columns" [rows]="rows" > </ng-table>
<div class="">
"): DeviceOverviewComponent@18:10 ;
Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…)
In my html I got this:
<ng-table [columns]="columns" [rows]="rows" > </ng-table>
My Component is this:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DeviceService } from '../services/device.service';
@Component({
selector: 'device-overview',
templateUrl: 'dist/html/deviceoverview.component.html',
providers: [DeviceService],
})
export class DeviceOverviewComponent {
devices: any;
columns: any;
rows: any;
constructor(private deviceService: DeviceService, private router: Router) {
}
loadDevices() {
this.deviceService.getDevices()
.then((data) => {
this.devices = data
this.rows = this.devices
})
}
goToDevice(deviceName: string) {
this.router.navigateByUrl('/devices/' + deviceName)
}
ngOnInit() {
this.columns = [
{ title: "test", name: "id" }]
this.loadDevices();
}
}
And my app.module is this:
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { AppComponent } from './components/app.component';
import { DeviceOverviewComponent } from './components/deviceoverview.component'
import { DeviceService } from './services/device.service';
import { routing } from './app.routing';
@NgModule({
imports: [
Ng2TableModule,
BrowserModule,
FormsModule,
HttpModule,
routing,
],
declarations: [
DeviceOverviewComponent,
AppComponent,
],
providers:
[
{provide: LocationStrategy, useClass: HashLocationStrategy},
DeviceService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Does anybody know anything about the Usage of ng2-table? Or is there a valid alternative, since the demo page/usage documentation is not available by now?
I found some alternatives, but lots of them had their last commit a long time ago, which might be a problem, since I am always using latest Angular2.
Thanks for reading and any hel is appreciated!
EDIT: I've made it to the next step!
I needed to add
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
@NgModule({ ...,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
within my app.module.ts
Now I am getting the table header with the "test" column and the ID property of my row data is displayed correctly.
Even the demo from ng2-table didn't have that import. I guess docs and demos arent made for newbes nowadays. :/
i see a typo in your html:
[colums]="columns"
It should be
[columns]="columns"
You're missing n
Plunker Example (I also tried it on local machine and it works)
You shouldn't use CUSTOM_ELEMENTS_SCHEMA
systemjs.config.js
map: {
...
'ng2-table': 'npm:ng2-table'
},
packages: {
...
'ng2-table': {
defaultExtension: 'js'
}
}
这篇关于Ng2表格不支持最新的Angular2版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
