Компонент поворотного стола для угловых 2?

Question

Я ищу компонент пользовательского интерфейса с некоторыми богатыми функциями поворотного стола.

Я взглянул на сетку ag. Кажется, это правильно, но это не бесплатно, и на данный момент это не вариант. Возможно, в будущем это будет возможно, но пока это должно быть бесплатным.

Если нет возможности для углового 2, было бы неплохо обходным путем с компонентом javascript с ванилем?

Answer 1

См igPivotGrid от Зажигают UI-

http://igniteui.github.io/igniteui-angular2/samples/igPivotGrid-XmlaDataSource/igPivotGrid-XmlaDataSource.html

Образец Component-

import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core'; 
import {IgPivotDataSelectorComponent, IgPivotGridComponent} from "./src/igniteui.angular2.ts"; 
import {bootstrap } from '@angular/platform-browser-dynamic' 

declare var jQuery: any; 
@Component({ 
    selector: 'my-app', 
    templateUrl: "./igPivotGrid-XmlaDataSourceTemplate.html", 
    directives: [IgPivotDataSelectorComponent, IgPivotGridComponent] 
}) 
export class AppComponent { 
    private optsGrid: IgPivotGrid; 
    private optsSelector: IgPivotDataSelector; 
    private selectorId: string; 
    private gridId: string; 
    private data: any; 

    constructor() { 
     this.data = new jQuery.ig.OlapXmlaDataSource({ 
      serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll', 
      catalog: 'Adventure Works DW Standard Edition', 
      cube: 'Adventure Works', 
      rows: "[Ship Date].[Calendar]", 
      columns: "[Delivery Date].[Calendar]", 
      measures: "[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]", 
     }); 

     this.selectorId = "dataSelector"; 
     this.gridId = "pivotGrid"; 

     this.optsGrid = { 
      dataSource: this.data, 
      height: "650px" 
     }; 

     this.optsSelector = { 
      dataSource: this.data, 
      height: "650px", 
      width: "30%" 
     }; 
    } 
} 

bootstrap(AppComponent); 

шаблон HTML:

<h1 class="push-down-md">igPivotGrid using XmlDataSource</h1> 

<div class="row"> 
    <div class="col-md-12"> 
     <ig-pivot-grid [(widgetId)]="gridId" [(options)]="optsGrid"> 
     </ig-pivot-grid> 
     <ig-pivot-data-selector [(widgetId)]="selectorId" [(options)]="optsSelector"> 
     </ig-pivot-data-selector> 
    </div> 
</div> 

Это может сьютов ваше требование. Посмотрите, поможет ли это.

Answer 2

Вы попробовали этот элемент шарнира от Flexmonster http://www.flexmonster.com/doc/integration-with-angular-2/?

Выглядит неплохо, но немного дороже