Использование автозаполнения материала для встроенного редактирования с ag-grid

Question

У меня возникают проблемы при попытке использовать angular-material Autocomplete для выполнения встроенного редактирования.

Создан план для того же: Материал Автозаполнение для встроенного редактирования - ag-grid

1. Опции автозаполнения не приходят в ожидаемую позицию.Мне нужно прокрутить внизу нижней части таблицы, чтобы увидеть параметры.
2. После выбора любого параметра я не могу видеть обновленное значение в строке - вместо этого я вижу только пустое значение.

Попытался предоставить различные значения для isPopup?(): boolean { return false; } для # 1 и getValue() { return this.selectedValue; } для # 2, но не получил никакой подсказки о том, что на самом деле является проблемой.

То, что я хочу,

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
    }
`],

Частично получил ответ от здесь

Во-вторых, вы сами должны позаботиться о focus, поэтому самый простой способ создать еще одну ссылку ViewChild и добавить ее к материалу, например, #cInput

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

В третьем случае используйте опцию вместо value внутри _autoCompleteChanged Функция

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