Angular material 自动完成结合 ngb 模态

Question

我正在尝试合并 autocomplete from angular material in a ng-bootstrap modal box。我希望模式框打开，当用户在字段中键入内容时，material 自动完成会启动并显示结果。取而代之的是，自动完成显示在模态后面的褪色区域中。一半的按钮被模式本身隐藏，当您单击另一半时，在褪色区域中，模式框刚刚关闭（预计会在单击褪色区域时发生）。使用向上和向下按钮，以及 select 的回车键，自动完成工作。唯一真正的问题是它在模态后面。

作为示例，我制作了这个 stackblitz demo。当您单击该按钮时，模式将打开。当您在输入字段中单击时，可能的选项显示为 angular material。

我认为定位或 z-index 会有帮助，但我似乎没有找到解决方案。我更喜欢使用 bootstrap 模式框，而不是 material 模式框，所以我不想切换。

Answer 1

我发现将以下行添加到 autocomplete-filetr-example.css 修复了 firefox 和 chrome 中的层问题，我没有检查 edge/ie:

/deep/ .cdk-overlay-container {
  z-index: 2000;
}

Answer 2

只需更改 material 的 z-index。为此，您可以在 styles.scss 中添加：

.cdk-overlay-container,.cdk-global-overlay-wrapper,.cdk-overlay-connected-position-bounding-box {
  z-index: 9000
}

嗯，一些大于 1050 的数字

Angular material 自动完成结合 ngb 模态

Angular material autocomplete combined with ngb modal

javascript

angular

angular-material

ng-bootstrap