select - 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 选项。我向 cdk-overlay-container 提供了增加的 z-index 值并且它起作用了。

谢谢您的支持。