javascript - Angular ag-Grid : how to autogenerate default template for cell but with different name of field?

Question

当很多列都有特定模板时，我有 ag-grid。但到目前为止，我放入表中的一些数据只不过是文本。我想为默认情况添加更多内容:

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

而且我不知道如何在模板中使用未指定的字段。例如，当字段名为“XYZ”时，我从api数据中获取数据，如何在我的默认模板中显示它？

在这种情况下:

<ng-template #defaultRecord let-record>
  ADDITIONAL THINGS HERE
  <span> Value of XYZ param</span>
</ng-template>

有人可以帮助我吗？谢谢!

编辑1:

自定义 CellRenderer 组件:

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

agInit 方法中的参数看起来如何:

正如您在图片中看到的，在模板中我想显示定义字段的 Fields.Date 参数的值。我该如何在上面的模板中使用它？

Answer 1

如果我正确理解你想要做什么。那么这是一种方法。

您将上下文参数添加到模板上下文中。

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

我正在使用 lodash 函数，但您可以使用其他库或编写简单的方法来使用对象的路径从对象中获取值。