使用Material Autocomplete通过ag-grid进行内联编辑

Question

在尝试使用angular-material Autocomplete进行内联编辑时遇到了问题。

为同一对象创建了Material Autocomplete for Inline Edit - ag-grid

1. 自动完成选项不在预期的位置。我必须向下滚动到网格底部下方才能看到选项。
2. 选择任何选项后，我将无法在行中看到更新后的值-而是看到空白值。

尝试为＃1的isPopup?(): boolean { return false; }和＃2的getValue() { return this.selectedValue; }提供各种值，但没有任何线索是什么真正的问题。

我想要的是

1. 要显示在适当位置的选项-就像我们在使用常规材料自动完成功能时看到的一样
2. 打开单元格进行编辑时要显示的选项-到目前为止，我必须在编辑单元格中单击。
3. 选择合适的值后，还应该在网格中对其进行更新。

Answer 1

  

第一种情况可以通过覆盖.cdk-overlay-pane来解决，只需在您的styles组件中添加AutocompleteEditor块

styles: [`
    ::ng-deep .cdk-overlay-pane {
        /* Do you changes here */
        position: fixed; // <- only this one is crucial
        z-index: 1000;
        background:white
    }
`],

部分得到here的答复

  

第二，您必须自己照顾focus，因此最简单的方法是创建另一个ViewChild引用并将其添加到材料输入中，例如#cInput

@ViewChild('cInput') public cInput;
afterGuiAttached?(): void {
    this.cInput.nativeElement.focus();
}

  

第三种情况，在value函数中使用选项代替_autoCompleteChanged

_autoCompleteChanged(option) {
  this.selectedValue = option; 
}