NG2表不是最新版本Angular2

我目前使用Angular2我的申請工作，現在我想NG2表添加到我的組件。 ng2-Table on Git NG2表不是最新版本Angular2

我得到這個錯誤，忍不住問：

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=""> 
    "): [email protected]: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表的用法什麼？還是有一個有效的替代方案，因爲演示頁面/使用文檔現在不可用？

我發現了一些替代方案，但有很多人有他們的最後提交很久以前，這可能是一個問題，因爲我總是使用最新Angular2。

感謝您的閱讀和任何HEL表示讚賞！

編輯： 我已經邁向下一步！

我需要添加

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' 
@NgModule({ ..., 
schemas: [CUSTOM_ELEMENTS_SCHEMA], 
})

我app.module.ts

現在我得到的「測試」列和我行數據的ID屬性表頭顯示正常範圍內。

即使從NG2表演示沒有這種進口。我想現在的docs和demos並不是針對newbes的。：/

來源

2016-09-21 Faigjaz

我看到你的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' 
    } 
}

來源

2016-09-21 06:55:14 yurzui

Whups，是的。但那只是我的問題中的一個錯字。我修復它。 – Faigjaz

您不應該使用'CUSTOM_ELEMENTS_SCHEMA'。去掉它。你之後看到了什麼錯誤？ – yurzui

刪除它讓我回到了我的問題的出發點。爲什麼我不應該使用CUSTOM_ELEMENTS_SCHEMA？你的Plunker也不適合我。 – Faigjaz

後很長一段時間我關閉這個問題。

在我來說，我有這些結構：

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

所以，我試圖把NG2智能表在app.module，但是我錯了。正確的是放在travel-plan.module中。

來源

2017-01-24 05:42:00 user1854804

NG2表不是最新版本Angular2

回答

相關問題