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值，它起作用了。

多谢你们的支持。