带有输入字段排序图标位置的 ngx-datatable 自定义标题模板答案

【问题标题】：ngx-datatable custom headertemplate with inputfield sort iconposition带有输入字段排序图标位置的 ngx-datatable 自定义标题模板
【发布时间】：2020-08-06 11:50:27
【问题描述】：

我尝试使用 ngx-datatable 创建一个数据表，在这个表中我需要按列过滤。我在 headerdefinition 中创建了一个带有过滤功能的输入字段。这工作正常。我还添加了带有自定义标题的排序。

我的笨拙定义：

<ngx-datatable-column name="createTimestamp" [minWidth]="getWidth(6)" [maxWidth]="getWidth(6)">
<ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
  <span (click)="sort()">Erster Auftritt</span>
  <div class="reportfilterbackground">
    <input type="text" class="form-control reportfilter" aria-describedby="basic-addon1" [(ngModel)]="dateFilter">
  </div>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
  {{row.createTimestamp | date:'dd.MM.yyyy HH:mm:ss'}}
</ng-template>

它工作正常，但排序图标位于错误位置：

我显示了 DOM，我看到在输入字段之后添加了排序图标：

我尝试用 css 将图标移动到正确的位置，但不幸的是这不起作用，因为列宽和列名非常不同。

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： angular ngx-datatable

【解决方案1】：

我用 css 修复它，显示 flex 和 order 如下：

.datatable-header-cell-template-wrap {
    display: flex;
    flex-wrap: wrap;
}
.datatable-header-cell-template-wrap .sort-btn {
    align-self: center;
}
.datatable-header-cell-template-wrap .reportfilterbackground {
    order: 10;
}

"order: 2" 就足够了，但如果启用复选框，它必须是 3。为了确保过滤器字段是最后一个，我使用 10。

【讨论】：