ngx-datatable动态设置列宽

Question

我将ngx-datatable的列宽存储在数据库中。我使用AJAX调用获取这些值。

如何为数据表设置这些值？

我试过的

1. 在<ngx-datatable-column>元素上设置[width]属性
2. 将datatable注入@ViewChild(DatatableComponent) table: DatatableComponent;并设置， this.table.bodyComponent.columns[0].width = 500;
   
   我尝试使用和不使用这些方法this.table.recalculate();，但是似乎没有任何效果。

编辑
我使用datatable-column与header-template和cell-template。

Answer 1

如果使用Hoang Duc Nguyen的解决方案，则还可以将宽度存储在列中：

 columns = [
    { name: 'Name', prop: 'name', width: 250},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

Answer 2

您需要将 columnwidth与一起设置[columnMode]="force"，如下所示：

应用程序组件.html

<ngx-datatable
  class="material"
  [rows]="rows"
  [loadingIndicator]="loadingIndicator"
  [columns]="columns"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [reorderable]="reorderable"
  columnMode="force">
</ngx-datatable>

app.component.ts

  columns = [
    { name: 'Name', prop: 'name'},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

  rows = [
    {name: "A", gender: "male", company: "abc"},
    {name: "B", gender: "female", company: "abc"},
    {name: "C", gender: "male", company: "abc"}
  ];

  columnWidths = [
    {column: "name", width: 50},
    {column: "gender", width: 100},
    {column: "company", width: 150}
  ]

  ngOnInit() {
    this.columns.forEach((col: any) => {
      const colWidth = this.columnWidths.find(colWidth => colWidth.column === col.prop);
      if (colWidth) {
        col.width = colWidth.width;
      }
    });
  }

Answer 3

您可以创建自定义 ngx-datatable-column 模板并使用 [width] 属性，例如：

<ngx-datatable-column name="Name" prop="name" [width]="200">
    <ng-template let-name="value" ngx-datatable-cell-template>
        {{name}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Gender" prop="gender" [width]="100">
    <ng-template let-gender="value" ngx-datatable-cell-template>
        {{gender}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Company" prop="company" [width]="300">
    <ng-template let-company="value" ngx-datatable-cell-template>
        {{company}}
    </ng-template>
</ngx-datatable-column>

Answer 4

我让它工作了，尽管它非常简单：

我将列的宽度值存储在object充当字典的中。问题是网格在我的 ajax 调用完成之前就已渲染，并且无法使网格自行重绘。

所以我将字典对象的初始值设置为null并将其放在*ngIf网格上：<ngx-datatable *ngIf="colSizes">

这样，只有在字典的值准备好使用之后才会进行渲染。