时间戳

首页 > 解决方案 > 通过 ag-grid 使用 Material Autocomplete 进行内联编辑

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

问题描述

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

为此创建了 plunk：用于内联编辑的材料自动完成 - ag-grid

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

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

我想要的是，

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

标签： angular-material2ag-gridag-grid-ng2ag-grid-angular

解决方案

第一种情况可以通过覆盖来解决.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
    }
`],

部分从这里得到答案

第二，你必须自己照顾focus，所以最简单的方法是创建另一个ViewChild参考并将其添加到材料输入中作为示例#cInput

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

第三种情况，使用选项而不是value内部_autoCompleteChanged函数

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

推荐阅读