Aggrid的自动行高度属性不起作用

Question

我在项目中使用角网格。当细胞含量增加时，我想自动增加行高度。我检查了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;        
    }
}

如何实现这一点？

Answer 1

它将像这样起作用。试试下面的

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

包括CellStyle：{"白空间"："正常"}然后它将起作用。

Answer 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;
          };

}

希望它有帮助。