使用 Material 自动完成功能对 ag-grid 进行内联编辑

Question

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

为此创建了 plunk：Material Autocomplete for Inline Edit - ag-grid

1. 自动完成选项未出现在预期位置。我必须向下滚动到网格底部下方才能看到选项。
2. 一旦我 select 任何选项，我就无法在行中看到更新的值 - 我只看到空白值。

尝试为 #1 提供 isPopup?(): boolean { return false; } 的各种值，为 #2 提供 getValue() { return this.selectedValue; } 的各种值，但不知道实际问题是什么。

我想要的是，

1. 在适当位置显示的选项 - 就像我们在使用普通 material 自动完成时看到的那样
2. 打开单元格进行编辑时立即显示的选项 - 截至目前，我必须在编辑单元格内单击。
3. 一旦我完成 select 适当的值，它也应该在网格中更新。

Answer 1

The first case could be solved via overriding .cdk-overlay-pane, just add styles block to your AutocompleteEditor component

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

从

得到了部分答案

The second, you have to take care of focus by your self, so the easiest way to create another ViewChild reference and add it to material input as example #cInput

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

The third case, use option instead of value inside _autoCompleteChanged function

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