单元格编辑器框架无法显示在网格上答案

【问题标题】：cell editor framework cannot display over the grid单元格编辑器框架无法显示在网格上
【发布时间】：2018-11-11 06:06:48
【问题描述】：

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

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

我想变成这样

【问题讨论】：

标签： angular typescript ag-grid

【解决方案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。

【讨论】：

是的！谢谢你的帮助，很抱歉迟到的回复。但是我遇到的另一个问题是我单击日历的任何部分，它会自行关闭。有什么方法可以防止日历对话框在用户选择日期之前关闭？
@Jim 您是说日历弹出窗口在您单击它内部时关闭（不是在日期上），还是在您单击它外部时关闭？当我在弹出窗口内单击时，我的示例不会关闭，但如果我在外部单击，它会关闭。你可以看看这个来了解如何防止这种行为：stackoverflow.com/questions/48589538/…。在我的应用程序中，如果用户尝试在不设置日期的情况下保存数据，我只会给他们一条错误消息。
@Jim 如果您想阻止弹出窗口关闭，这是另一个可能的方向：stackoverflow.com/questions/46967970/…。
当我在日历内单击时它会关闭。例如，我单击一个“>”这个图标转到下个月，但日历会自行关闭。我会看一下并尝试使用这些链接。感谢您为我提供解决方案。如果它对我不起作用，我会再次在这里发布我的问题。
我应该在哪里包含这个 'const startDateColDef: ColDef = this.grid.columnApi.getColumn('startDate').getColDef(); startDateColDef.cellEditorFramework = GridCellDateComponent; startDateColDef.valueFormatter = (pars: ValueFormatterParams) => GridCellDateComponent.formatForDisplay(pars);'??