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

Question

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

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

* 这是我的 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
  }">