时间戳

首页 > 解决方案 > 如何将样式信息传递给网格？

angular - 如何将样式信息传递给网格？

问题描述

我有一个ag-grid组件，它在 HTML 文件中采用 aa 样式，如下所示：

style="height: 600px; width: 100%"

像这样使用它可以正常工作，但我正在尝试从外部设置高度和宽度，但我遇到了问题。例如，如果我使用

style="height: {{gridHeight}}; width: {{gridWidth}}"

这没用。我不确定我在这里缺少什么。另外，有没有办法检查是否有值{{gridHeight}}然后我们使用它，否则我们使用让我们说500px？

这就是我在我的 html 模板中设置网格的方式，所以 div 的东西不是一个选项..

<ng-container *ngIf="isInfiniteScrollGrid; else paginatedGrid">
    <ag-grid-angular #gridInstance style="height: 600px; width: 100%"
        class="{{theme}}"
        [columnDefs]="gridColumnDefs"
        [rowSelection]="rowSelection"
        [enableRangeSelection]="enableRangeSelection"
        [rowDeselection]="rowDeselection"
        [sideBar]="sideBar"
        [rowModelType]="rowModelType"
        [cacheBlockSize]="cacheBlockSizeInfiniteScroll"
        [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
        [infiniteInitialRowCount]="infiniteInitialRowCount"
        [getRowNodeId]="getRowNodeId"
        [rowData]="rowData"
        [gridOptions]="gridOptions"
        [isExternalFilterPresent]="isExternalFilterPresent"
        [doesExternalFilterPass]="doesExternalFilterPass"
        [suppressRowClickSelection]="suppressRowClickSelection"
        (modelUpdated)="onModelUpdated()"
        (columnVisible)="toggleColumnVisibility($event)"
        (gridReady)="onReady($event)"
        (columnMoved)="onColumnEvent($event)"
        (columnResized)="onColumnEvent($event)">
    </ag-grid-angular>
</ng-container>

标签： angular

解决方案

在 TypeScript 文件中声明height和width变量，然后在[ngStyle].

<div [ngStyle]="{
  'height':this.height === 800 ? '800px' : '500px',
  'width':this.width === 800 ? '800px' : '500px'
}"></div>

堆栈闪电战

推荐阅读