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

【问题标题】：Ng2-table not working with latest Angular2 versionNg2-table 不适用于最新的 Angular2 版本
【发布时间】：2017-01-29 06:04:55
【问题描述】：

我目前正在为我的应用程序使用 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 的演示也没有该导入。我猜现在的文档和演示不是为新手制作的。：/

【问题讨论】：

标签： html angular typescript

【解决方案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'
  }
}

【讨论】：

哇，是的。但这只是我的问题中的一个错字。我会修复它。
你不应该使用CUSTOM_ELEMENTS_SCHEMA。去掉它。之后你看到了什么错误？
删除它让我回到问题的起点。为什么我不应该使用 CUSTOM_ELEMENTS_SCHEMA？你的 Plunker 也不适合我。
原始错误为If 'ng-table' is an Angular component and it has 'colums' input。您不应该使用CUSTOM_ELEMENTS_SCHEMA，因为ng-table 不是Web 组件。它是一个 Angular 组件
所以“验证”部分是将其添加到 system.js.config 中？我以为我只需要将它放入我的模块导入中。好的，谢谢！

【解决方案2】：

很久以后我关闭了这个问题。

就我而言，我有以下结构：

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

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

【讨论】：