7

ngx-datatable で行詳細を使用すると、2 つの問題が発生します。

  1. 行インデックスが機能していません。問題を説明する github の問題を見つけましたが、v. 10.0.2 前後で修正されたと思われ、11.1.5 (現在のバージョン) を使用しています。すべての行は {{rowIndex}} に対して 0 を返します。私の回避策は、独自のインデックスを列に書き出してから参照することですが、そうする必要はありません。以下のコードでは、いずれかの行をクリックするとすべての行が編集モードになります。

  2. 「親」行の全幅を使用する行詳細行を取得できません。[columnMode]="'flex'"デモでは columnMode]="'force'" を使用しているのに対し、私が使用しているためだと思われます。min-width を設定できますが、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