Question

我目前正在为我的应用程序使用Angular2，现在我想将ng2-table添加到我的组件中。 http://pastebin.com/X5vStUZu

我收到此错误，不禁要问：

 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的演示也没有那个导入。我想现在的文件和演示并不适用于新人。：/

Answer 1

我在你的HTML中看到一个拼写错误：

[colums]="columns"

应该是

[columns]="columns"

你错过了n

Plunker Example （我也尝试在本地计算机上运行）

您不应使用CUSTOM_ELEMENTS_SCHEMA

<强> systemjs.config.js

map: {
  ...
  'ng2-table': 'npm:ng2-table'
},
packages: {
  ...
  'ng2-table': {
      defaultExtension: 'js'
  }
}

Answer 2

很长一段时间后我都关闭了这个问题。

在我的情况下，我有这些结构：

＆＃13;

src
--app
  -- app.module
  -- TravelPlan
    -- travel-plan.module
    -- test.component

＆＃13;

所以，我试图将ng2-smart-table放在app.module中，但我错了。正确的是放在travel-plan.module。

Ng2表没有使用最新的Angular2版本

2 个答案: