在 AG-GRID Angular 中插入单元格断线

Posted

技术标签:

【中文标题】在 AG-GRID Angular 中插入单元格断线【英文标题】:Insering cell break line in AG-GRID Angular 【发布时间】:2020-09-17 08:36:32 【问题描述】:

我使用 ag-grid 在一个单元格中显示 2 个数据,但我希望数据与折线不一样: Data without break line

我尝试使用 "\n" "\r" "\br" 但没有用。这是我的代码:

    import  Component, OnInit  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Grid, GridApi  from 'ag-grid-community';
import  AgGridAngular  from 'ag-grid-angular';
import  DealsService  from './services/deals.service';
import * as moment from 'moment';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
)
export class AppComponent implements OnInit 
title = 'app';

columnDefs = [
headerName: 'Class', cellRenderer: function(params) return params.data.DEALCAT + params.data.DEALID,width:150, filter: true ,

];

rowData : any;
constructor(private service:DealsService) 




dateFormatter(params)
return moment(params.value).format('DD/MM/YYYY');


ngOnInit() 
this.service.getDealsList().subscribe(data => 
this.rowData = data;
); 


这里是html代码:

<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
style="width: 1350px; height: 630px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"

[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
>
</ag-grid-angular>

【问题讨论】:

这能回答你的问题吗? AG-Grid - How to insert a line break into my cell data 感谢您的帮助。但是我应该在 gridOptions 中放置 rowHeight 以使 ' 起作用,因为当我只放 ' 时,第二个值不会出现,我猜是因为单元格的自动高度为 25px,所以我需要改变高度,但我不知道该怎么做。 – Abaoub 刚刚编辑 【参考方案1】:

这样试试

cellRenderer: function(param)
    return param.data.DEALCAT + '<br/>' + param.data.DEALID;
  

【讨论】:

以上是关于在 AG-GRID Angular 中插入单元格断线的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 项目中自动刷新 ag-grid 中的单元格

如何在ag-grid Angular中获取其他列单元格但同一行的值?

如何从 ag-grid 单元格中打开模态对话框单击 Angular 6

单元测试 - onGridReady - Angular 中的 Ag-grid 事件

如何根据Angular 6同一行中的其他单元格值在AG-Grid选择下拉列表中加载不同的选项?

Angular 6 ag-grid 单元格渲染器单击功能