Angular ag-Grid: как автоматически создать шаблон по умолчанию для ячейки, но с другим именем поля?

У меня есть 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
  }
};
}

И я не знаю, как использовать неуказанное поле в шаблоне. Например, я получаю данные api, когда поле называется «XYZ», как сделать так, чтобы оно отображалось в моем шаблоне по умолчанию?

В этом случае:

<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 param, которое является определенным полем. Как я предполагаю использовать его в шаблоне выше?


javascript angular ag-grid ag-grid-angular
person Dominik Z    schedule 15.04.2020    source источник
comment
Очень уникальный вопрос по Ag-сетке, который я когда-либо видел здесь, также я раньше не использовал автогенерацию столбцов. Смотрю ответы ..   -  person LuDeveloper    schedule 15.04.2020
comment
Возможно, я неправильно понимаю. Но похоже, что у вас есть настраиваемый компонент рендеринга ячеек, в котором внутри html есть шаблон. Функция agInit в средстве визуализации ячеек передает объекты столбца и строки, поэтому вы можете получить данные: row[colDef.field].   -  person Matt Nienow    schedule 16.04.2020
comment
@MattNienow, я только что отредактировал свой вопрос и поместил туда пользовательский компонент Cellrenderer. Вы имеете в виду, что я должен добавить другое поле, например chosenField: any, а затем что-то добавить к этому в функции agInit? this.chosenField = params['field], а поле из массива - это тот параметр, который я поместил в свой generateColumn метод в свойство cellRendererParams?   -  person Dominik Z    schedule 16.04.2020
comment
Да, что-то в этом роде должно работать. Кроме того, в объекте params должен быть атрибут value, который просто должен автоматически содержать значение.   -  person Matt Nienow    schedule 16.04.2020
comment
@MattNienow, но как я могу назвать это в шаблоне? Когда у меня let-record в ng-template, запись - это то, что находится в data из параметров   -  person Dominik Z    schedule 17.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

если я правильно понимаю, что вы хотите сделать. Тогда вот один способ.

Вы добавляете параметр контекста в контекст шаблона.

<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, но вы можете использовать другую библиотеку или написать простой метод для получения значения от объекта, используя его путь.

person Sergey_M    schedule 17.04.2020