如何根据来自后端的数据动态更改标题名称？答案

【问题标题】：How to change Header name dynamically based on the data coming from backend?如何根据来自后端的数据动态更改标题名称？
【发布时间】：2019-02-14 04:53:37
【问题描述】：

我在我的 Angular 应用程序中使用 ag-grid。我在 columnDefs 数组中为我的网格定义了标题。我的列有一个标题作为金额。我希望这是动态的，如果来自后端的货币是美元，我希望我的标题是“Amount USD”，如果货币是 INR，我希望我的标题是“Amount INR”等等。我已经尝试了文档中给出的所有内容，但我无法使其正常工作。

我尝试过使用 setColumnDefs(colDefs) 但它不起作用，或者我没有正确使用它，因为在文档中没有给出太多关于它的用法

我的代码如下：-

我的组件文件代码

ngOnInit() { 
      this.columnDefs2 = [
      {
        headerName: '#', width: 30, checkboxSelection: true, suppressSorting: 
         true,
        suppressMenu: true, hide: this.colhide, cellStyle: {
          'padding-top': '2px',
        }
      },      
      { headerName: 'Currency', field: 'currency', colId:'currencyname', width: 
       70, minWidth: 70, maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },

      { headerName: 'Amount', field: 'amount', width: 65, minWidth: 65, 
       maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },
      { headerName: 'Amount USD', field: 'amountUSD', width: 100, minWidth: 100, 
        maxWidth: 150, cellStyle: { 'padding-top': '2px' } 
      }
    ];   
  }

onGridReady(e,row){
    var col = this.gridOptions.columnApi.getColumn("currencyname");
    var colDef = col.getColDef();
    // update the header name
    colDef.headerName = "New Header";
    this.gridOptions.api.refreshHeader();

  }

HTML 代码

<ag-grid-angular style="width: 100%; height: 100%" class="ag-dark" [columnDefs]="columnDefs2" (cellClicked)="agGridCellClicked($event, row)"
                        [rowData]="row.contDetailJO" rowSelection="multiple" (rowSelected)="onRowSelected($event, row)" (onGridReady)="onGridReady($event, row)" [gridOptions]="{rowHeight: 50}"
                        [domLayout]="'autoHeight'"  [enableColResize]="true">
                      </ag-grid-angular>

【问题讨论】：

你是这样用的吗？ this.gridOptions.api.setColumnDefs(colDefs)。请显示您的使用情况
请出示您尝试过的代码。
在我的 ts 文件中 onGridReady(e,row){ var col = this.gridOptions.columnApi.getColumn("currencyname"); var colDef = col.getColDef(); // 更新头部名称 colDef.headerName = "New Header"; this.gridOptions.api.refreshHeader(); }
ColumnDefs=[{ headerName: 'Currency', field: 'currency', colId:'currencyname', width: 70, minWidth: 70, maxWidth: 150, cellStyle: { 'padding-top' : '2px' } }]

标签： angular ag-grid

【解决方案1】：

您可以按照this 答案中的说明指定 headerValueGetter。

Here 是一个典型的堆栈闪电战。

【讨论】：

【解决方案2】：

在 ts 默认日期格式：字符串；默认时间格式：字符串；

构造函数( 私有 yourService: YourService,) {

this.defaultCurrencySymbol = this.settingService.defaultCurrencySymbol.value;

}

在服务文件中 defaultCurrencySymbol = new BehaviorSubject('');

systemOptions 这是 api 响应

私有 setCurrencyType(systemOptions: any[]) {

const DEFAULT_CURRENCY_SYMBOL = 'ApiResponceType';
const defaultCurrencySymbol = systemOptions.find(option =>
  option.attributes.keyName === DEFAULT_CURRENCY_SYMBOL).attributes.keyValue;
if (defaultCurrencySymbol){
  this.defaultCurrencySymbol.next(defaultCurrencySymbol);
}

}

在 HTML 中

【讨论】：