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

Question

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

为此创建了 plunk：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();
}

第三种情况，在_autoCompleteChanged函数中使用option而不是value

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