html - Angular 4 + Primeng(数据表): custom scrollHeight property

Question

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

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

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