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

Question

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

这是我的表格 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 模式并没有真正按照预期工作。一种解决方法是您需要[rowHeight]="'auto'"在表中添加 HTML。这将使段落显示在多行中，正如您在编辑的 plunkr 的屏幕截图中看到的那样： 。[scrollbarV]="true"但是，我发现如果也存在的话，添加上述内容将不起作用。

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

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

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