Ich lerne Angular 2 und versuche nicolas kruchten des Pivot-Tabelle js in einem Winkel 2 AnwendungImport Pivot-Tabelle js in Winkel 2
Wenn ich versuche zu wickeln Pivot-Tabelle js in dem Winkel 2 Es ist nicht gibt jeder importieren Fehler jedoch, wenn ich versuche, das gleiche im Browser zu überprüfen Es zeigt die Pivot-Tabelle nicht an.
Ich kann überprüfen, dass die Komponente erstellt wird, aber immer leer ist.
Ich denke, AfterViewInit
sollte ich Tabelle anzeigen lassen.
\\ pivot.component.ts
import {Component , Inject, ElementRef, AfterViewInit} from '@angular/core';
declare var jQuery:any;
declare var $:any;
import 'pivottable/dist/pivot.min.js';
import 'pivottable/dist/pivot.min.css';
@Component({
selector: 'app-pivot',
template: `<div id="pivot"></div>`
})
export class PivotWrapper {
private el: ElementRef;
//constructor spelling was incorrect now working fine
constructor (@Inject(ElementRef)el: ElementRef){
this.el = el;
}
ngAfterViewInit(){
if (!this.el ||
!this.el.nativeElement ||
!this.el.nativeElement.children){
console.log('cant build without element');
return;
}
var container = this.el.nativeElement;
var inst = jQuery(container);
var targetElement = inst.find('#pivot');
if (!targetElement){
console.log('cant find the pivot element');
return;
}
//this helps if you build more than once as it will wipe the dom for that element
while (targetElement.firstChild){
targetElement.removeChild(targetElement.firstChild);
}
//here is the magic
targetElement.pivot([
{color: "blue", shape: "circle"},
{color: "red", shape: "triangle"}
],
{
rows: ["color"],
cols: ["shape"]
});
}
}
\\ app.component.ts
import { Component,ElementRef,Inject} from '@angular/core';
declare var jQuery: any;
import {PivotWrapper} from './pivot.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
\\ app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {PivotWrapper} from './pivot.component';
@NgModule({
declarations: [
AppComponent, PivotWrapper
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NoopAnimationsModule,
FormsModule,
HttpModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent, PivotWrapper]
})
export class AppModule { }
Ich sehe nicht, wie AfterViewInit verwendet wird. Ich nehme an, es sollte implementiert werden und buildPivot() aufrufen, ist das richtig? – cmonkey
@cmonkey Es war ein dummer Fehler, da die Schreibweise für den Konstruktor falsch war. Aber jetzt, wenn ich versuche, "PivotUI" -Funktion zu verwenden, gibt es Rendering-Fehler – user2881430