Question

我是使用Angular 4.3和PrimeNg使用Jhipster构建的应用程序的初学者。

我有一个表（数据表，因为turbotable是从Angular 5开始的）。我想根据布尔值自定义scrollHeight属性，以便在布尔值为true时拥有更大的表，而布尔值为false时具有较小的表。

*这是我的HTML，可以正常工作*

<p-dataTable [value]="objects" scrollable="true" scrollHeight="200px" emptyMessage="" [loading]="loading">
     <p-column field="name" header="Name" [sortable]="true"></p-column>
... other columns
</p-dataTable>

但是我有一个扩展了屏幕一部分的按钮，所以我希望我的scrollHeight变为：scrollHeight="400px"

*按钮代码*

<div class="col col-lg-12">
    <div class="row text-center" style="padding: 10px">
        <div class="col-lg">
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="extendOrReduceTheTop()">
                <span [ngClass]="{'fa-caret-up': extend, 'fa-caret-down': !extend}" class="fa"></span>&nbsp;
            </button>
        </div>
    </div>
</div>

* TS按钮*

extendOrReduceTheTop() {
    this.extend = !this.extend;
}

官方文档在这里： Documentation scroll on datatable

我已经阅读了文档，尝试了几种个性化的解决方案，但没有一个起作用：

<p-dataTable [value]="objects" scrollable="true" [ngStyle]="{'scrollHeight': extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading">

<p-dataTable [value]="objects" scrollable="true" [scrollHeight]="{extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading">

这个值的单位是ts（但不会重新渲染表，所以...这没用：

<p-dataTable #tableCara [value]="aeroportsCaract" scrollable="true" [scrollHeight]="scrollheight" emptyMessage="" [loading]="loading">

有人有想法吗？

Answer 1

您可以尝试以下方法：

在您的CSS组件文件中：

.small-table{
  /** your css **/
}

.big-table{
  /** your css **/
}

在您的html组件文件中：

<p-dataTable [value]="objects" scrollable="true" [ngClass]="{
    'small-table':extend === false,
    'big-table':extend
  }">

Angular 4 + Primeng（数据表）：自定义scrollHeight属性

1 个答案: