按钮单击时在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>