Детали динамической строки зависят от высоты контента, возможно ли это с ngx-datatable?

avatar
hackp0int
1 июля 2021 в 16:01
281
0
0

Я хотел бы динамически установить высоту для rowDetails, в зависимости от содержимого внутри rowDetails. Я пробовал «авто» или «100%», но это не сработало, как ожидалось.

У моего ngx-datatable включена виртуальная прокрутка.

<ngx-datatable-row-detail (toggle)="onDetailToggle($event)" [rowHeight]="(getHeight() | async)">
  <ng-template let-row="row" let-col="col" ngx-datatable-row-detail-template>
    <perfect-scrollbar [scrollIndicators]="true" [autoPropagation]="false" [config]="scrollBarConfig ">
      <div class="row-details-container" [ngStyle]="{ 'width': '' + setWidthDynamically() + 'px' }">
        <div class="details-container">
          <h6>{{ translateHeader('DATAGRID_COL6_TITLE') }}</h6>
          <p>{{ row.description }}</p>
        </div>
        <div class="details-container" *ngIf="row.oldValue?.length > 0 && checkWhatViewHeight().showInfo">
          <h6>{{ translateHeader('DATAGRID_COL8_TITLE') }}</h6>
          <p class="faded-out">{{ row.oldValue }}</p>
        </div>
        <div class="details-container" *ngIf="row.newValue?.length > 0 && checkWhatViewHeight().showInfo">
          <h6>{{ translateHeader('DATAGRID_COL9_TITLE') }}</h6>
          <p class="faded-out">{{ row.newValue }}</p>
        </div>
      </div>
    </perfect-scrollbar>
  </ng-template>
</ngx-datatable-row-detail>

         getHeight(): Observable<number> {
    // how should I write this function??
    }

Пример

Источник

Ответы (0)