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

Question

我在我的项目中使用 Angular 网格。我想在单元格内容增加时自动增加行高。我检查了 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

我做了以下更改来实现功能：-

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


}

希望对您有所帮助。

Answer 2

它将像这样工作。像下面这样尝试

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

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