输入数据时，角度 - 动手尺寸/布局毛刺

Question

我在Angular 5中构建并在某些组件中使用Handsontable作为电子表格界面。举报是行为不端，我无法理解为什么。

我的配置看起来像这样：

settings.component.ts

// staff and manager add Handsontable
hotOne: any = {
  data: [],
  colHeaders: [
    'Name<span style="color: var(--cbRed);">&#42;</span>',
    'Email<span style="color: var(--cbRed);">&#42;</span>',
    'Staff Type<span style="color: var(--cbRed);">&#42;</span>',
    'Activity<span style="color: var(--cbRed);">&#42;</span>',
    'Employee ID',
    'WWCC Number',
    'WWCC Issue Date'
  ],
  columns: [], // set in ngOnInit (as we need to wait for user and organisation to be set)
  colWidths: [],
  options: {
    preventOverflow: 'horizontal',
    minRows: 20,
    minSpareRows: 1,
    rowHeaders: false,
    stretchH: 'all'
  }
};

settings.component.html

<div class="hot-container">
    <hot-table
      [data]="hotOne.data"
      [columns]="hotOne.columns"
      [colHeaders]="hotOne.colHeaders"
      [colWidths]="hotOne.colWidths"
      [preventOverflow]="hotOne.options.preventOverflow"
      [minRows]="hotOne.options.minRows"
      [minSpareRows]="hotOne.options.minSpareRows"
      [rowHeaders]="hotOne.options.rowHeaders"
      [stretchH]="hotOne.options.stretchH">
    </hot-table>
</div>

settings.component.css

.hot-container {
  width: 100%;
  margin-bottom: 12px;
  height: 350px;
  overflow: hidden;
}

问题似乎主要来自div.wtHolder和div.wtHider。将30个项目粘贴到表格中会产生：

1. 在表格下方创建一个大空间。

2. 表中仅显示21/30项（即只有21 <tr>个元素）。有趣的是，如果我从css文件中删除overflow: hidden，则会显示28/30项。

请参阅此问题的屏幕截图：



此外，如果我从CSS中删除height: 350px;和overflow: hidden;，粘贴数据，使用下拉列表，单元格之间的标签，甚至在Chrome中打开和关闭终端，都会导致表格下方的空间变为成长和成长！？！？！

感谢您帮助我指出正确的方向来解决这个问题：）

Answer 1

事实证明，我需要做的就是将renderAllRows选项设置为true。这令人惊讶地解决了上述所有问题。