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 对象作为模型绑定到您的数据表：

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

<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] 定义一个映射数组，并将更改后的大小存储在那里。

现在是骇人听闻的部分...... 不要对 span 样式应用固定宽度，而是使用 [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 还是很陌生，如果有人在阅读本文后感到肮脏，请见谅。