Ng2-table不适用于最新的Angular2版本

法格贾兹

我目前在我的应用程序中使用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制作的。:/

yurzui

我在您的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AWS IAM角色不适用于Elasticsearch 5.0.0-alpha2,但适用于2.3版本

来自分类Dev

AWS IAM角色不适用于Elasticsearch 5.0.0-alpha2,但适用于2.3版本

来自分类Dev

ng2:相当于require

来自分类Dev

ng2 翻译和@Input()

来自分类Dev

Angular2 Ng2 文件上传 CORS 问题

来自分类Dev

预先安装的PdfViewerActivity不适用于SelfSigned受信任的用户证书Android 11版本2

来自分类Dev

jQuery Xeditable不适用于Angular2

来自分类Dev

Angular2 useAsDefault不适用于子路由

来自分类Dev

ngStyle不适用于angular2中的!important

来自分类Dev

angular2 canActivate()不适用于Observable响应

来自分类Dev

Angular2管道不适用于输入

来自分类Dev

Angular2 绑定不适用于 Observable

来自分类Dev

ng2 @ViewChild(ren)/ @ContentChild(ren)在普通JS中?

来自分类Dev

获取降级的ng2组件的ContentChildren

来自分类Dev

传递值以扩展插件ng2智能表

来自分类Dev

ng2:更新keyup时FirebaseListObservable中的值

来自分类Dev

ng2 [disabled] =“!myInput.value”无法正常工作

来自分类Dev

NG2 : Pass attribute name to component using a variable

来自分类Dev

带有ng2 + Natiivescript的Nativescript-壁画

来自分类Dev

附加数据以查看 NativeScript NG2

来自分类Dev

ng2 从组件继承并扩展父模板

来自分类Dev

带有CKEditor设置的最新Angular2版本

来自分类Dev

UI-路由器混合:在触发具有NG2组件的NG1状态之前,NG2状态不起作用

来自分类Dev

CORS Cookie可用于获取请求,但不适用于Angular2中的发布

来自分类Dev

具有旧版ng1组件依赖项的ng2 AsyncRoute

来自分类Dev

Angular2绑定不适用于Google OAuth2 Promise

来自分类Dev

Angular 2 ng2如何在模板中使用TypeScript枚举?

来自分类Dev

NG2:angular2-webpack-starter-HMR的目的是什么?

来自分类Dev

在Angular 2新应用上安装后找不到NG2树模块

Related 相关文章

  1. 1

    AWS IAM角色不适用于Elasticsearch 5.0.0-alpha2,但适用于2.3版本

  2. 2

    AWS IAM角色不适用于Elasticsearch 5.0.0-alpha2,但适用于2.3版本

  3. 3

    ng2:相当于require

  4. 4

    ng2 翻译和@Input()

  5. 5

    Angular2 Ng2 文件上传 CORS 问题

  6. 6

    预先安装的PdfViewerActivity不适用于SelfSigned受信任的用户证书Android 11版本2

  7. 7

    jQuery Xeditable不适用于Angular2

  8. 8

    Angular2 useAsDefault不适用于子路由

  9. 9

    ngStyle不适用于angular2中的!important

  10. 10

    angular2 canActivate()不适用于Observable响应

  11. 11

    Angular2管道不适用于输入

  12. 12

    Angular2 绑定不适用于 Observable

  13. 13

    ng2 @ViewChild(ren)/ @ContentChild(ren)在普通JS中?

  14. 14

    获取降级的ng2组件的ContentChildren

  15. 15

    传递值以扩展插件ng2智能表

  16. 16

    ng2:更新keyup时FirebaseListObservable中的值

  17. 17

    ng2 [disabled] =“!myInput.value”无法正常工作

  18. 18

    NG2 : Pass attribute name to component using a variable

  19. 19

    带有ng2 + Natiivescript的Nativescript-壁画

  20. 20

    附加数据以查看 NativeScript NG2

  21. 21

    ng2 从组件继承并扩展父模板

  22. 22

    带有CKEditor设置的最新Angular2版本

  23. 23

    UI-路由器混合:在触发具有NG2组件的NG1状态之前,NG2状态不起作用

  24. 24

    CORS Cookie可用于获取请求,但不适用于Angular2中的发布

  25. 25

    具有旧版ng1组件依赖项的ng2 AsyncRoute

  26. 26

    Angular2绑定不适用于Google OAuth2 Promise

  27. 27

    Angular 2 ng2如何在模板中使用TypeScript枚举?

  28. 28

    NG2:angular2-webpack-starter-HMR的目的是什么?

  29. 29

    在Angular 2新应用上安装后找不到NG2树模块

热门标签

归档