Question

我在我的角度应用程序中使用ag-grid。我在columnDefs数组中为网格定义了Header。我的列有一个标题为Amount。我希望它是动态的，例如，如果来自后端的货币是USD，我希望我的标头是“金额USD”，如果货币是INR，我希望我的标头是“金额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>

Answer 1

以ts为单位 defaultDateFormat：字符串； defaultTimeFormat：字符串;

构造函数（私人yourService：YourService，）{

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

}

服务文件中的

defaultCurrencySymbol = new BehaviorSubject（''）;

systemOptions这是api响应

private 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格式

Answer 2

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

Here是典型的堆叠闪电战。

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

2 个答案: