Question

我正在使用Angular 2 ngx-datatable。当我将垂直滚动设置为true并初始化groupRowsBy参数时，页面将折叠。我有很多数据，所以我需要这个虚拟滚动。

这是我的代码：

   <ngx-datatable
    class='material'
    [rows]='rows'
    [columnMode]="'force'"
    [groupRowsBy]="'name'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [scrollbarV]="true">
    <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader 
    (toggle)="onDetailToggle($event)">
      <ng-template let-group="group" let-expanded="expanded"
       ngx-datatable-group-header-template>
        <div style="padding-left:5px;">
          <a
            href="#"
            [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded"
            title="Expand/Collapse Group"
            (click)="toggleExpandGroup(group)">
          </a>                          
        </div>
      </ng-template>
    </ngx-datatable-group-header>
    <ngx-datatable-column name="Name">
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender">
    </ngx-datatable-column>
  </ngx-datatable>
</div>

Answer 1

是的，它是known bug。因此，对于今天，我发现使其起作用的唯一方法是将scrollbarV设置为false，然后在CSS中自己实现：

:host {
    --datatable-body-height: 100%;

    ::ng-deep {

        .datatable-body {                      
          height: var(--datatable-body-height) !important;
          overflow-y: auto;
        }
     }
}

请注意，角度组件具有封装，因此可以在父组件元数据中将其设置为none，或者使用:host和::ng-deep进入ngx-datatable的类。

我还对身体高度使用了一个变量，因为[scrollbarV]属性设置为false时，身体高度自动设置为auto（在我的情况下，我希望表格填充整个外部div并做出响应，并使用高度自动调整到表格的内容。）该计算部分是在父组件.ts文件中完成的。

带有行分组的ngx datatable垂直滚动

1 个答案: