如何获取所有内容之上或与自动完成控件同一级别的自动完成列表

Question

我正在使用 Angular prime-ng 并与它一起使用 mat-autocomplete。 我已经使用过它并且工作得很好，但是当我在 prime-ng 侧边栏中重复使用它并单击表单字段时，它会显示在侧边栏下方或后面的选项列表。

我想在我的控件的同一级别显示列表

我的代码片段如下（自动完成代码是另一个组件，它被注入到 #injectedComponentHere 的侧边栏中）：

这是自动完成代码：

     <mat-form-field class="example-full-width">
        <mat-label>Number</mat-label>
        <input type="text"
               placeholder="Pick one"
               aria-label="Number"
               matInput
               [formControl]="myControl"
               [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          @for (option of filteredOptions_ | async; track option) {
            <mat-option [value]="option">{{option}}</mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>

这是侧边栏的代码：

<div class="card flex justify-content-center">
        <p-sidebar modal="false"  #sidebarRef [(visible)]="sidebarVisible"                          [style]="{width:'80%'}">
                <ng-template pTemplate="header">
                <div class="flex align-items-center gap-2">
                    
                    <span class="font-bold">
                        <i class="pi pi-face-smile"></i>
                        User managments
                    </span>
                </div>
            </ng-template>
             <div class="row grid">
            <div class="col-3" style="background-color: #fff;">
                <!-- SOME CONTROLS -->
            </div>
    
            <div class="col-9" id="hello-component-host" style="background-color:#d9d9d938;">
                  <ng-template #injectedComponentHere></ng-template> 
            </div>
          </div>
       </p-sidebar>
  </div>

Answer 1

我在scss文件中找到了解决方案：

  ::ng-deep .cdk-overlay-container {
    z-index: 10001 !important;
  }