Angular-Slickgrid 显示空白记录答案

【问题标题】：Angular-Slickgrid showing blank recordsAngular-Slickgrid 显示空白记录
【发布时间】：2019-06-08 05:37:44
【问题描述】：

我正在尝试使用angular slickgrid 在我的应用程序中显示网格选项。我已经提到wiki page 显示网格，但网格中没有显示数据，甚至浏览器控制台中也没有错误。

我已根据post 更新了我的 app.module、Angular.json，但没有使用 & 显示 0 条记录的网格。我尝试使用 stackblitz 创建这个问题，但它不允许我安装 angular-slickgrid 包，因此无法发布实时示例。

我的代码

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: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 }              
    ];

    this.dataset = [];
    for (let i = 0; i < 1000; i++) {    
      this.dataset[i] = {
        id: i, 
        title: 'Task ' + i
      };

    }

  }

}

我的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

【问题讨论】：

我是 Angular-Slickgrid 库的作者，@JustCode 解决方案可以工作，但我要指出，如果您想定义自己的，也可以使用 [gridHeight]（在视图中）高度，可以与enableAutoResize一起使用（当设置gridHeight时，它不会调整高度，但仍会调整宽度）。我还添加了commit 来解决您的问题，如果您省略填写前面提到的这两个属性中的任何一个，它现在将引发错误。

标签： angular slickgrid

【解决方案1】：

那是因为你在使用

enableAutoResize: false,

改成

enableAutoResize : true

它应该可以工作，当您使用 false 时，您需要根据需要手动为网格指定高度（使用 css）。但是当您允许 true 时，它会自动设置大小并在浏览器调整大小时调整大小。

demo

【讨论】：

哦！这很简单，但我投入了很多时间。非常感谢@justcode。它现在工作
有趣，我可能应该在我的库中进行检查（或引发控制台错误），以确保用户至少有一个或另一个（某些网格大小或启用自动调整大小）。我可能会在以后的增强中考虑它。