为什么强制列模式在我的 ngx-datatable 实例上不能正常工作？

Question

我正在尝试使用 ngx-datatable 包在我的 Angular 4 应用程序中显示一些数据，我对设置列宽的 "force" 模式特别感兴趣.据我了解，该模式应该根据单元格内容智能地确定列宽，以便所有内容都可见。但是，它对我不起作用。列的宽度设置为 150 像素，而不是它们各自的自定义宽度。

这是我的 table HTML:

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [rowHeight]="50"
  >
</ngx-datatable>

这是我的配置：

rows = [
    { displayName: 'Austin', emailAddress: 'a@a.aa', role: 'Swimlane',
      a: 'This should all be visible and none of this should be cut off because the table is in force mode and it should keep it all visible' },
    { displayName: 'Dany', emailAddress: 'b@b.bb', role: 'KFC' , a:'b',
      b:'This text should also be completely visible due to the selected display mode of "force"'},
    { displayName: 'Molly', emailAddress: 'c@c.cc', role: 'Burger King', a:'test', b: '3',
      c: 'Aaaaaaaaaabbbbbbbbbbbbbbbbcccccccccccccccccccccc' },
  ];

columns = [
  { name: 'Name', prop: 'displayName' },
  { name: 'Email', prop: 'emailAddress' },
  { name: 'Role', prop: 'role'},
  { name: 'A', prop: 'a'},
  { name: 'B', prop: 'b'},
  { name: 'C', prop: 'c'}
];

Plunker 在这里显示问题： https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview

Answer 1

根据我以往对ngx-datatable的理解和使用，force模式并没有真正达到预期的效果。一种解决方法是您需要在 table HTML 中添加 [rowHeight]="'auto'"。这将使段落显示为多行，如您在编辑后的 plunkr 的屏幕截图中所见：。但是，我发现如果 [scrollbarV]="true" 也存在，则添加上述内容将不起作用。

基本上，您的数据table html 应该如下所示：

<ngx-datatable
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    >
</ngx-datatable>

您还可以通过将 width:'300' 添加到列数组中的列对象来手动设置所需列的宽度。

为什么强制列模式在我的 ngx-datatable 实例上不能正常工作？

Why is the force column mode not working correctly on my ngx-datatable instance?

ngx-datatable

angular