Javascript 在angular 2中导入数据透视表js

我正在学习Angular 2，并尝试在Angular 2应用程序中导入nicolas kruchten的数据透视表js

当我尝试在angular 2中包装数据透视表js时，它不会给出任何错误，但是当我尝试在浏览器中检查时，它不会显示数据透视表

我可以检查组件是否已创建，但始终为空

我认为

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"]
        });
}

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 { }

---

请参阅下面的解决方案： 我正在使用angular cli

--package.json

 "jquery": "^3.2.1",
 "jquery-ui-dist": "^1.12.1",    
 "pivottable": "^2.13.0",

 "styles": [
     "../node_modules/pivottable/dist/pivot.min.js",
    "styles.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/jquery-ui-dist/jquery-ui.min.js",
  "../node_modules/pivottable/dist/pivot.min.js"

  ],

--angular cli.json

 "jquery": "^3.2.1",
 "jquery-ui-dist": "^1.12.1",    
 "pivottable": "^2.13.0",

 "styles": [
     "../node_modules/pivottable/dist/pivot.min.js",
    "styles.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/jquery-ui-dist/jquery-ui.min.js",
  "../node_modules/pivottable/dist/pivot.min.js"

  ],

--应用程序数据透视包装器

import { Component, OnInit,Inject, ElementRef, AfterViewInit }   from '@angular/core';

import 'pivottable/dist/pivot.min.js';
import 'pivottable/dist/pivot.min.css';
declare var jQuery:any;
declare var $:any;

@Component({
selector: 'app-pivot-wrapper',
templateUrl: './pivot-wrapper.component.html',
styleUrls: ['./pivot-wrapper.component.css']
})

export class PivotWrapperComponent implements OnInit {
private el: ElementRef;
constructor(@Inject(ElementRef)el: ElementRef) { 
   this.el = el;

 }

 ngOnInit() {      
}

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('#output');

  if (!targetElement){
    console.log('cant find the pivot element');
    return;
  }


 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"]
     });
  }
 }

--pivot wrapper.component.html

 <div id="output"></div>

这是一个使用react with pivottable（在typescipt生态系统中作为pivottable工作）的示例-可能无法回答您的问题-但可能会给您一些提示

我认为这对处理没有加载css的pivot table的人会有所帮助。 我没有意识到我忘记在

angular cli.json

中包含

pivot表css

：

---

我不知道AfterViewInit是如何使用的。我认为应该实现它并调用buildPivot（），对吗？@cmonkey这是一个愚蠢的错误，因为构造函数的拼写不正确。但是现在，当我尝试使用

pivotUI

函数时，它会给出渲染错误，而这在理论上可能会回答这个问题，在这里包括答案的基本部分，并提供链接供参考。有关如何编写更好的“基于链接”答案的说明，请参阅。谢谢我认为这里有一个输入错误，您希望在“样式”中包含“pivot.css”而不是.js文件：[“./node\u modules/pivottable/dist/pivot.min.js”，对吗？也包括在“node\u modules/jquery ui/dist/jquery ui.min.js”中，