Javascript Angular ag Grid:如何为单元格自动生成默认模板,但字段名称不同?
当很多列都有特定的模板时,我使用ag网格。但到目前为止,我输入表中的一些数据只不过是文本。。我想为默认情况添加更多内容:Javascript Angular ag Grid:如何为单元格自动生成默认模板,但字段名称不同?,javascript,angular,ag-grid,ag-grid-angular,Javascript,Angular,Ag Grid,Ag Grid Angular,当很多列都有特定的模板时,我使用ag网格。但到目前为止,我输入表中的一些数据只不过是文本。。我想为默认情况添加更多内容: <ng-template #defaultRecord let-record> ADDITIONAL THINGS HERE <!-- CHOOSEN FIELD HERE --> </ng-template> 这里还有其他东西 所以我有一种自动生成列的方法: private generateColumn(headerNa
<ng-template #defaultRecord let-record>
ADDITIONAL THINGS HERE
<!-- CHOOSEN FIELD HERE -->
</ng-template>
这里还有其他东西
所以我有一种自动生成列的方法:
private generateColumn(headerNameKey: string, colId: string, ngTemplate: TemplateRef<any>, filter = true, sortable = true, field?: string) {
const headerName = headerNameKey ? this.translateService.instant(headerNameKey) : '';
return {
headerName,
field,
sortable,
filter,
colId,
cellRendererFramework: CellRendererComponent,
cellRendererParams: {
ngTemplate
}
};
}
private-generateColumn(headerNameKey:string,colId:string,ngTemplate:TemplateRef)
正如您在图片中看到的,在模板中,我想显示字段的值。Date
参数是定义字段。我想如何在上面的模板中使用它?如果我正确理解您想要做的事情。
那么这里有一个方法
将上下文参数添加到模板上下文中
<ng-template #defaultRecord let-record let-value="value">
ADDITIONAL THINGS HERE
<span> {{value}} </span>
</ng-template>
我使用的是lodash函数,但您可以使用其他库或编写简单的方法来使用对象的路径从对象中获取值。我在这里看到的Ag grid上的问题非常独特,我以前也没有使用过自动生成列。我正在查看答案。我可能理解不正确。但看起来您有一个自定义单元格renderer组件,其中html有一个模板。单元格渲染器中的agInit
函数传入列和行对象,因此您可以获取数据:row[colDef.field]
@MattNienow我刚刚编辑了我的问题,并将自定义cellrenderer组件放在那里。你的意思是我必须添加其他字段,如chosenField:any
,然后在agInit
函数中分配一些内容?this.chosenField=params['field]
数组中的字段是我在propertyCellRenderParams
中的generateColumn
方法中放入的参数?是的,类似的东西应该可以工作。此外,params对象上应该有一个值
属性,它应该只自动包含该值。@MattNienow但我如何在te中调用它呢mplate?当我在ng模板中有let record
时,记录就是来自params的数据中的内容
export class CellRendererComponent implements ICellRendererAngularComp {
template: TemplateRef<any>;
templateContext: { $implicit: any, params: ICellRendererParams };
agInit(params: ICellRendererParams) {
this.template = params['ngTemplate'];
this.refresh(params);
}
refresh(params: ICellRendererParams): boolean {
this.templateContext = {
$implicit: params.data,
params
};
return true;
}
}
<ng-template #defaultRecord let-record let-value="value">
ADDITIONAL THINGS HERE
<span> {{value}} </span>
</ng-template>
refresh(params: ICellRendererParams): boolean {
const valuePath = params.colDef.field;
const value = _.get(params.data, valuePath); // using lodash
this.templateContext = {
$implicit: params.data,
params,
value
};
return true;
}