html - Angular 4 + Primeng(数据表):自定义scrollHeight属性

我是使用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">

有人有主意吗？

最佳答案

您可以尝试以下方法：

在您的css组件文件中：

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

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

在您的html组件文件中：

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

关于html - Angular 4 + Primeng(数据表):自定义scrollHeight属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51536031/