我目前在我的应用程序中使用Angular2,现在我想将ng2-table添加到我的组件中。ng2-Table on Git
我收到此错误,不禁要问:
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:(…)
在我的html中,我得到了:
<ng-table [columns]="columns" [rows]="rows" > </ng-table>
我的组件是这样的:
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();
}
}
我的app.module是这样的:
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 { }
有人知道ng2-table的用法吗?还是有一个有效的替代方法,因为演示页面/使用文档目前尚不可用?
我找到了一些替代方案,但是很多替代方案是很久以前的最后一次提交,这可能是一个问题,因为我一直在使用最新的Angular2。
感谢您的阅读,感谢您的帮助!
编辑:我已经进入了下一步!
我需要添加
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
@NgModule({ ...,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
在我的app.module.ts中
现在,我获得带有“ test”列的表标题,并且行数据的ID属性正确显示。
甚至ng2-table的演示都没有导入。我想现在的文档和演示版arent都是为newbes制作的。:/
我在您的html中看到一个错字:
[colums]="columns"
它应该是
[columns]="columns"
你不见了 n
Plunker示例(我也在本地计算机上尝试过,它可以正常工作)
您不应该使用CUSTOM_ELEMENTS_SCHEMA
systemjs.config.js
map: {
...
'ng2-table': 'npm:ng2-table'
},
packages: {
...
'ng2-table': {
defaultExtension: 'js'
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句