mat-datepicker 作为 ag-grid 弹出窗口的单元格编辑器显示为空白答案

【问题标题】：mat-datepicker as cell editor for ag-grid popup turns up blankmat-datepicker 作为 ag-grid 弹出窗口的单元格编辑器显示为空白
【发布时间】：2020-09-27 17:02:34
【问题描述】：

我有一个材料日期选择器作为 ag-grid 的单元格编辑器，它在我升级到 angular 9 之前工作 - 现在日期选择器弹出但弹出窗口是空白的。我在同一页面上的日期选择器在 ag-grid 之外可以正常工作的其他区域：

这是我的单元格编辑器：

import { Component, AfterViewInit, ViewChild } from '@angular/core'
import { MatDatepicker } from '@angular/material/datepicker'

@Component({
  selector: 'multiselect-date-renderer',
  styleUrls: ['./cell-text.component.scss'],
  template: `
    <input #input matInput [(ngModel)]="value" [matDatepicker]="picker" />
    <mat-datepicker #picker></mat-datepicker>
  `
})

export class CellDateComponent implements AfterViewInit {
  @ViewChild('input') textInput
  @ViewChild('picker') datePicker: MatDatepicker<Date>

  params
  value: any

  constructor() {
  }

  ngAfterViewInit() {
    this.datePicker.open()
  }

  agInit(params: any): void {
    this.params = params
    this.value = this.params.value ? new Date(this.params.value) : new Date()
  }

  getValue() {
    return this.textInput.value
  }

}

【问题讨论】：

标签： angular angular-material ag-grid

【解决方案1】：

datepicker 和 AOT 构建似乎有一些问题，我无法让它工作，我的项目中有一个稍微不同的组件配置（我有一个带有点击绑定的包装器组件，它反过来打开 datepicker），所以遵循只是一个尝试的建议！

...
  @ViewChild('picker', { read: ElementRef, static: true }) datePickerElRef!: ElementRef<HTMLElement>;
...
  ngAfterViewInit(): void {
    this.elRef.nativeElement.click();
  }
...

【讨论】：