我正在尝试将角度材料的自动完成组合在ng-bootstrap模态框中。我希望模态框打开，当用户在字段中键入时，材料自动完成会启动并显示结果。相反，自动完成显示在模态后面的淡出区域中。一半的按钮被模态本身隐藏，当您单击另一半时，在淡出区域中，模态框会关闭(预计在单击淡出区域时会发生这种情况(。使用向上和向下按钮以及要选择的 Enter 键，自动完成确实有效。唯一真正的问题是它落后于模态。
作为一个例子，我做了这个堆栈闪电战演示。单击该按钮时，模式将打开。在输入字段中单击时，可能的选项按角度材料显示。
我认为定位或 z 指数会有所帮助，但我似乎没有找到解决方案。我更喜欢使用引导模式框，而不是材料框，所以我不想切换。
我发现添加以下行autocomplete-filetr-example.css修复了Firefox和chrome中的图层问题，我没有检查边缘/ie：
/deep/ .cdk-overlay-container {
z-index: 2000;
}
只需更改材料的 z 索引即可。为此，您可以在styles.scss中添加：
.cdk-overlay-container,.cdk-global-overlay-wrapper,.cdk-overlay-connected-position-bounding-box {
z-index: 9000
}
好吧，一些大于 1050 的数字