agGrid 的自动行高属性不起作用答案

【问题标题】：Auto Row Height property of agGrid is not workingagGrid 的自动行高属性不起作用
【发布时间】：2019-12-13 13:40:46
【问题描述】：

我在我的项目中使用 Angular Grid。我想在单元格内容增加时自动增加行高。我检查了 autoHeight 属性以设置为自动，但在我的情况下它不起作用。

在我的情况下，OldRequestNumber(s) 可以包含跨越多行的多个数据。在下面应用时，它仅显示列表事件中的第一个，列表中还有更多

HTML 页面

<ag-grid-angular style="width: 100%; height: 200px"
                     class="ag-theme-balham"
                     [pagination]="true"
                     [gridOptions]="genderGridOptions"
                     [rowData]="genderRowData"                     
                     [columnDefs]="genderColDef"
                     (gridReady)="onGridReady($event)">
    </ag-grid-angular>

组件页面(*.ts)

export class GenderComponent implements OnInit {
    genderRowData: []; 
    genderColDef = [
        {
            headerName: 'Gender Name', field: 'Name',            
            autoHeight: true,                                      
        },
        {
            headerName: 'Request Number', field: 'RequestNumber',          
            autoHeight: true,                   
        },
        {
            headerName: 'OldRequestNumber(s)',
            cellRendererFramework: OldRequestRendererComponent,
            autoHeight: true,
        },        
    ];

    constructor(private genderCommonService: CommonFunctionService, private genderCellValueService: CellValueChangedService) {
    }

    ngOnInit() {
        this.genderCommonService.getEntityData('getallgenders')
            .subscribe((rowData) => this.genderRowData = rowData,
                (error) => { alert(error) }
            );
    }

    onGridReady(params: any) {
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();
    } 
}

单元格渲染器 HTML

<div *ngFor="let req of params.data.OldRequestNumber">     
    {{req.RequestNumber}}
</div>

单元格渲染器组件

export class OldRequestRendererComponent {
    private params: any;

    agInit(params: any): void {
        this.params = params;        
    }

}

如何做到这一点？

【问题讨论】：

你能添加一个stackblitz代码，或者类似的东西吗？

标签： angular ag-grid row-height

【解决方案1】：

它会像这样工作。像下面这样试试

{ headerName: 'Date', field: 'date', width: 175, cellStyle: { "white-space": "normal" }, autoHeight: true },

包含 cellStyle: { "white-space": "normal" } 那么只有它会起作用。

【讨论】：

【解决方案2】：

为了实现该功能，我做了以下更改：-

HTML 页面

<ag-grid-angular style="width: 100%; height: 200px"
                     class="ag-theme-balham"
                     [pagination]="true"
                     [gridOptions]="genderGridOptions"
                     [rowData]="genderRowData"                     
                     [columnDefs]="genderColDef"
                     [getRowHeight]="getRowHeight"     //Added this line
                     (gridReady)="onGridReady($event)">
    </ag-grid-angular>

组件页面(*.ts)

修改了ngOnInit()和constructor()

ngOnInit()
    {        
        this.genderCommonService.getEntityData('getallgenders')
            .subscribe((rowData) => {
                rowData.forEach(function (dataItem: any, index) {                                  
                    dataItem.rowHeight = 25 * dataItem.OldRequestNumber.length;                    
                });
                this.genderRowData = rowData
            },
                (error) => { alert(error) }
            );  

    } 

constructor(private genderCommonService: CommonFunctionService, private genderCellValueService: CellValueChangedService) {

          this.getRowHeight = function (params : any) {
                 return params.data.rowHeight;
          };


}

希望对你有帮助。

【讨论】：