单击按钮时在 Angular-Slickgrid 中显示数据

Question

我想在单击angular slickgrid 的按钮时在网格中显示数据。当用户单击搜索按钮时，我参考了wiki page 和许多在线文章来显示网格数据。

在我的应用程序中理解和实现此功能需要花费很多时间sharing code on SO。这可能对其他人有益，甚至其他人可以分享更好的答案。

我的代码是

import { Component, OnInit } from '@angular/core';
import { Column, FieldType, Formatter, Formatters, GridOption }  from 'angular-slickgrid';

export class ReportComponent implements OnInit {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];

  ngOnInit(): void  
  {        
    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 15
      },
      enableAutoResize: false,
      enableExcelCopyBuffer: true,

    };

    this.columnDefinitions = [
  { id: 'value', name: 'Temperature', field: 'value', sortable: true, type: FieldType.string, width: 70 }   ,
  { id: 'High_value', name: 'High value', field: 'High_value', sortable: true, type: FieldType.string, width: 70 },
  { id: 'Low_value', name: 'Low value', field: 'Low_value', sortable: true, type: FieldType.string, width: 70 },        
    ];    
  }

Search(rangeFrom,rangeTo)
{

this.dataset = [];

this._Dataservice.getHistoricalData(1,rangeFrom.value, rangeTo.value ).then (
           data => { 

             if (data)
             {   
               let i:number =0;
               for (let stat of data) 
              {
                i++;        
                this.dataset[i] = {
                      id: i, 

                      value: stat.value,
                      High_value: stat.High_value,
                      Low_value: stat.Low_value,
                  };

              } 
             }
             else
               this.alertService.error("No data");
           }
    )

}

我的html

 <angular-slickgrid gridId="grid2" style="width:95%;"
                [columnDefinitions]="columnDefinitions"
                [gridOptions]="gridOptions"
                [dataset]="dataset">
            </angular-slickgrid>

我正在使用的版本： jquery：^3.3.1 angular-slickgrid：^2.1.5 @angular/core：^7.2.0

Answer 1

我做了以下更改。我添加了 angularGridReady() 方法来获取网格的引用，并在分配数据后调用了 angularGrid.dataView.refresh() 方法。

export class ScadaReportComponent implements OnInit {
  angularGrid: AngularGridInstance;

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    console.log('Ready');
  }


  this._Dataservice.getHistoricalData(1,rangeFrom_date, rangeTo_date ).then (
               data => { 
                 if (data)
                 {   
                   for (let stat of data) 
                  { 
                    this.dataset[i] = {
                        id: i,           
                        value: stat.value,
                        High_value: stat.High_value,
                        Low_value: stat.Low_value,                                 
                       };

                  } 

                    this.angularGrid.dataView.refresh();
              }

Html 代码更改如下，我的代码开始工作了。

<angular-slickgrid gridId="grid2" style="width:95%;"
            [columnDefinitions]="columnDefinitions"
            [gridOptions]="gridOptions"   (onAngularGridCreated)="angularGridReady($event)"
            [dataset]="dataset">
        </angular-slickgrid>