7

我在 ngx-datatable 中使用 row-detail 有两个问题。

  1. 行索引不起作用。我发现了一个描述该问题的 github 问题，但据说它已在 v. 10.0.2 左右修复，我使用的是 11.1.5（当前版本）。{{rowIndex}} 的每一行都返回 0。我的解决方法是将我自己的索引写到一个列中，然后引用它，但我不应该这样做。使用下面的代码，当我单击其中一个时，每一行都会进入编辑模式，因为它们都具有相同的 rowIndex。

  2. 我无法让行详细信息行使用其“父”行的全宽。我怀疑这是因为我正在使用[columnMode]="'flex'"，而演示使用的是 columnMode]="'force'"。我可以设置一个最小宽度，但我不能让 width: 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>
    ...
4

2 回答 2

1

尝试将以下内容添加到您的 styles.scss 或 styles.css 文件中。这将强制详细信息行使用 100% 宽度。但是，这只是一种解决方法，开发人员没有提供任何解决方案。

datatable-scroller { width: 100% !important; }

于 2020-04-02T07:58:11.117 回答
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; }
于 2020-10-13T08:40:28.437 回答