ngx-datatable angular6中组行标题中的多列

Question

我正在使用ngx-datatable渲染具有行分组的数据表。

这里是HTML代码

<ngx-datatable [rows]="data" [loadingIndicator]="loadingIndicator" [groupExpansionDefault]="false"
    [groupRowsBy]="'Name'">
    <!-- Header Template -->
    <ngx-datatable-group-header [rowHeight]="60">
        <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <div class="table-group-header group-header">
                <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                    [class.datatable-icon-down]="expanded" (click)="expandGroup(group)">
                    {{group.key}}
                </span>
            </div>
        </ng-template>
    </ngx-datatable-group-header>

    <ngx-datatable-column name="Name" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.name}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Cost" [width]="100">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.cost}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Number" [width]="50">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.number}}
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

这是它的外观

我看到的示例提供了一个将在标题行中呈现的模板。我想要的是标题行中每列的总和（图像中标有红色框）。如何在组标题行中提供多个列？

我曾尝试在同一个模板下提供所有具有适当宽度的值，但问题是模板中div的宽度是固定的，并且可以在ngx-datatable中更改列大小，因此标头行模板布局不适合（如我提供了固定宽度）。

这是我的操作方式

<ngx-datatable-group-header [rowHeight]="60">
    <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div class="table-group-header group-header">
            <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                [class.datatable-icon-down]="expanded" (click)="expandGroup(group)">
                <span style="width: 300px;">
                    {{group.key}}
                </span>
                <span style="width: 100px;">
                    {{sumProperty(group.value, 'cost') | number: 0}}
                </span>
                <span style="width: 50px;">
                    {{sumProperty(group.value, 'number')}}
                </span>
            </span>
        </div>
    </ng-template>
</ngx-datatable-group-header>

Answer 1

经过数小时的哭泣，我找到了部分解决方案。这并非没有妥协，但对我而言，它已经足够好了。

首先，为列设置初始宽度。您已经通过使用[width]完成了此操作。但是，我建议将columns对象作为模型绑定到数据表：

然后，在您的[resize]上注册一个ngx-datatable回调：

<ngx-datatable
        #loadTable
        class="material"
        [rows]="loadData$ | async"
        .....
        [columns]="columns"
        ...
        ...
        (resize)="onResize($event)"
      >

对应的.ts文件的构造函数：

this.columns = [
    { 
      name : 'Name', 
      prop : 'name',
      width : 200
    }, 
    ....
 ]

然后，在您的回调中：

onResize(event){
    this.columns.find(col => col.name == event.column.name).width = event.newValue
  }

到目前为止很好。我们设法跟踪有关列的调整大小事件。如果要继续使用html列定义，则必须在组件中为[colName, newSize]定义一个映射数组，并将更改后的大小存储在其中。

现在是hacky部分...不要将固定宽度应用于跨度样式，而使用[ngStyle]并绑定到回调：

<span [ngStyle]="getWidth('Name')">
  <b>Test</b>
</span>

然后，在您的组件中：

getWidth(rowName){
let val = this.columns.find(col => col.name == rowName).width + "px"
    return {"width" : val}
}

注意，这会将跨度的width设置为下一列的确切开头。但是，这不是该列中文本的开头，因为已应用了填充。就我而言，该填充为19.2px。如果您要对此进行补偿，只需将填充添加到新应用的宽度即可。

我一般来说对angular和typescript还是陌生的，如果阅读此书后感到不舒服，对不起。