我目前正在为我的应用程序使用Angular2,现在我想将ng2-table添加到我的组件中。 关于Git的ng2-Table
我收到此错误,不禁要问:
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的演示也没有那个导入。 我想现在的文件和演示并不适用于新手。 :/
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. :/
最满意答案
我在你的HTML中看到一个拼写错误:
[colums]="columns"它应该是
[columns]="columns"你错过了
Plunker示例 (我也尝试在本地机器上运行)
您不应该使用CUSTOM_ELEMENTS_SCHEMA
systemjs.config.js
map: { ... 'ng2-table': 'npm:ng2-table' }, packages: { ... 'ng2-table': { defaultExtension: 'js' } }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' } }更多推荐
发布评论