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并且它有效。

感谢您的支持。