Angular ag-Grid：如何为具有不同字段名称的单元格自动生成默认模板？

Question

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

<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 函数，但您可以使用其他库或编写简单的方法来使用对象的路径从对象中获取值。

Angular ag-Grid：如何为具有不同字段名称的单元格自动生成默认模板？

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

javascript

ag-grid

angular

ag-grid-angular