angular - 单元格编辑器框架无法显示在网格上

Question

我在单元格编辑器框架中创建了一个自定义选择器，但我总是显示在网格内。我如何更改代码以使其显示出来，如图所示。我已将 isPopup() 设置为 true。

这就是我目前面临的问题。

我想做成这样

Answer 1

这就是你想要完成的吗:

如果是这样，这是我为实现它所做的事情:

在afterViewInit中(组件类实现了AfterViewInit):

const startDateColDef: ColDef = this.grid.columnApi.getColumn('startDate').getColDef();
startDateColDef.cellEditorFramework = GridCellDateComponent;
startDateColDef.valueFormatter = (pars: ValueFormatterParams) => GridCellDateComponent.formatForDisplay(pars);

GridCellDateComponent 模板包含:

<mat-form-field>
  <input
    matInput
    [matDatepicker]='picker'
    [(ngModel)]='value'
    >
  <mat-datepicker-toggle
    matSuffix
    [for]='picker'
    >
  </mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker
  #picker
  (selectedChanged)='onSelectChange(event)'
  >
</mat-datepicker>

组件类文件包含:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ICellEditorParams, SelectionChangedEvent } from 'ag-grid';
import { MatDatepicker } from '@angular/material';
import { ValueFormatterParams } from 'ag-grid/dist/lib/entities/colDef';

@Component({
  templateUrl: './grid-cell-date.component.html',
  styleUrls: ['./grid-cell-date.component.css']
})
export class GridCellDateComponent implements AfterViewInit {
private cellEditorParams: ICellEditorParams;
private columnWidth: string;
private value: string;
@ViewChild('picker', {read: MatDatepicker}) picker: MatDatepicker<Date>;

public static formatForDisplay(params: ValueFormatterParams): string {
  if (!params) {
    return '';
  }
  let date: Date;
  if (typeof params.value === 'number' || typeof params.value === 'string') {
    const stringValue = String(params.value);
    if (stringValue.length > 7 && /^[0-9]*$/.test(stringValue)) {
      const year: number = parseInt(stringValue.substring(0, 4), 10);
      const month: number = parseInt(stringValue.substring(4, 6), 10);
      const day: number = parseInt(stringValue.substring(6, 8), 10);
      date = new Date(year, month - 1, day);
    }
  } else {
    date = params.value;
  }
  return date ? date.toLocaleDateString() : '';
}

agInit(params: ICellEditorParams): void {
  this.cellEditorParams = params;
  this.value = params.value;
  console.log(this.value);
}

getValue(): string {
  console.log(this.value);
  return this.value;
}

isCancelAfterEnd(): boolean {
  return false;
}

isCancelBeforeStart(): boolean {
  return false;
}

isPopup(): boolean {
  return false;
}

ngAfterViewInit() {
  this.picker.open();
}

onSelectChange(event: SelectionChangedEvent): void {
  setTimeout(() => {
    this.cellEditorParams.stopEditing();
  });
}

}

我从这个链接获得了大部分指导:Datepicker Cell Editor Example .