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

Posted 2023-03-28

【中文标题】mat-datepicker 作为 ag-grid 弹出窗口的单元格编辑器显示为空白

【英文标题】：mat-datepicker as cell editor for ag-grid popup turns up blank

【发布时间】：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
  

【参考方案1】：

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

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