【发布时间】：2017-10-18 18:37:49
【问题描述】：
我正在学习 Angular 2 并尝试在 Angular 2 应用程序中导入 nicolas kruchten 的 Pivottable js
当我尝试将可透视的 js 包装在角度 2 中时它没有给出任何错误但是当我尝试在浏览器中检查它时它没有显示数据透视表。
我可以检查组件是否已创建但始终为空。
我认为AfterViewInit 应该让我展示表格。
\\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 { }
【问题讨论】：
-
我看不到 AfterViewInit 是如何使用的。我认为它应该被实现并调用 buildPivot() ，对吗？
-
@cmonkey 这是一个愚蠢的错误，因为构造函数的拼写不正确。但是现在当我尝试使用
pivotUI函数时，它会出现渲染错误 -
这是一个将 react 与 pivottable github.com/kurtzace/pivottableandreact 一起使用的示例（读作在 typecipt 生态系统中工作的 pivottobale）- 可能无法回答您的问题 - 但可能会给您提示
标签： javascript angular typescript pivottable.js