我在ngx-datatable中使用row-detail时遇到两个问题。
rowIndex不起作用。我发现了一个github问题描述了这个问题，但据说这个问题在v.10.0.2左右修复，而我正在使用11.1.5（当前版本）。每行为{{rowIndex}}返回0。我的解决方法是将自己的索引写入列然后引用它，但我不应该这样做。使用下面的代码，当我点击其中一行时，每一行都进入编辑模式，因为它们都具有相同的rowIndex。
我无法获取行详细信息行以使用其“父”行的全宽。我怀疑是因为我使用[columnMode]="'flex'"而演示使用columnMode] =“'force'”。我可以设置一个最小宽度，但我不能得到宽度：100％工作。可能是因为有一个没有宽度的div包装
<ngx-datatable #dataTable class="material expandable"
[rows]="rows"
[limit]="50"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
[selectionType]="'single'"
(select)="onSelect($event)"
(activate)="onActivate($event)">
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded" ngx-datatable-row-detail-template>
<span class="rowDetail" title="Click to edit" (click)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']"> {{row.name}} </span>
<mat-form-field floatPlaceholder='never' *ngIf="editing[rowIndex + '-name']">
<input matInput style="min-width:300px" (keyup.enter)="updateValue($event, 'name', rowIndex)" type="text" [value]="row.name" />
</mat-form-field>
</ng-template>
...
答案 0 :(得分：1)
尝试将以下内容添加到styles.scss或styles.css文件中。这将强制明细行使用100％的宽度。但是，这只是一种解决方法，开发人员没有提供任何解决方案。
datatable-scroller {
width: 100% !important;
}
答案 1 :(得分：0)
在下面添加到“ styles.scss”中，然后将[columnMode] =“'force'”添加到ng-template
<ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded" [columnMode]="'force'" ngx-datatable-row-detail-template>
.datatable-scroller {width: 100% !important; }