2016-09-21 2 views
0

현재 애플리케이션 용으로 Angular2를 사용하고 있으며 이제는 ng2 ​​테이블을 구성 요소에 추가하려고합니다. ng2-Table on GitNg2 테이블이 최신 Angular2 버전과 호환되지 않습니다.

내가이 오류를 얻고 도움 만 요청 없습니다 :이있어 나는 내 HTML에서

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:(…) 

:

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(); 
    } 

} 
:

<ng-table [columns]="columns" [rows]="rows" > </ng-table> 

내 구성 요소는이입니다

내 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를 사용하기 때문에 문제가 될 수있는 많은 대안이 있습니다.

읽어 주셔서 감사 드리며 감사드립니다.

편집 : 다음 단계로 넘어갔습니다!

나는

지금은 제대로 표시되는 "테스트"열 내 행 데이터의 ID 속성을 사용하여 테이블 헤더를 얻고 내 app.module.ts 내

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

을 추가 할 필요 .

심지어 ng2 테이블의 데모에도 가져 오기가 없습니다. 요즘은 워드 프로세서와 데모가 newbes 용으로 만들어지지 않았습니다. :/난 당신의 HTML에서 오타를 참조

답변

1

: 당신은

Plunker Examplen을 놓치고

[colums]="columns" 

그것은

[columns]="columns" 

을해야한다 (나는 또한 지역에 그것을 시도 기계 작동)

당신은 CUSTOM_ELEMENTS_SCHEMA에게

systemjs.config.js 나는이 문제를 닫습니다 오랜 시간 후

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

Whups, yes. 하지만 그건 내 질문에 오타뿐입니다. 아프다. – Faigjaz

+0

'CUSTOM_ELEMENTS_SCHEMA'을 사용하면 안됩니다. 그것을 제거하십시오. 그 후에 오류가 무엇입니까? – yurzui

+0

제거하면 내 질문의 출발점으로 돌아옵니다. CUSTOM_ELEMENTS_SCHEMA을 사용해야하는 이유는 무엇입니까? 또한 당신의 플 렁커가 나를 위해 일하지 않습니다. – Faigjaz

0

을 사용할 수 없습니다.내 경우

나는 이러한 구조를 가지고 : app.module에서

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

그래서, 내가 넣어 하려던 NG2 스마트 테이블을하지만, 내가 잘못했다. 올바른 것이 travel-plan.module에 저장됩니다.

관련 문제