mat-select 在 mat-expansion-panel 中不起作用

Question

我们必须在 mat-expansion-panel 中显示一个表单。表单中有多个字段，其中少数我使用 mat-select，另外一些我使用 mat-input。

在扩展面板中，matInput 工作正常，但 mat-select 没有显示用于选择可能值的选项。

虽然 mat-select 在正常显示时工作正常。

   <mat-expansion-panel>
        <mat-expansion-panel-header>
            Heading 1
        </mat-expansion-panel-header>
        <mat-form-field>
            <mat-select placeholder="Select">
                <mat-option value="1">option 1</mat-option>
                <mat-option value="2">option 2</mat-option>
                <mat-option value="3">option 3</mat-option>
                <mat-option value="4">option 4</mat-option>
            </mat-select>
        </mat-form-field>
    </mat-expansion-panel>

感谢任何帮助。

Answer 1

我通过添加以下样式解决了这个问题

body div.cdk-overlay-container {
  z-index: 1000000;
}

通过调试，我了解到另一个具有更高 z-index 的面板正在覆盖 mat-select 选项。我将增加的 z-index 值提供给 cdk-overlay-container 并且它起作用了。

感谢您的支持。