現在我正在開發一個 Angular 項目，在這個項目中有一個包含 2 個mat-autocomplete組件的頁面，一個用于選擇國家/地區，另一個用于選擇州/省/自治區/直轄市。狀態一工作正常，所有內容都停留在預期位置，如下所示：檢查元素會顯示有意義的屬性。對于div類名cdk-overlay-pane（在圖片中突出顯示），widthis350px和top以及left將動態更改以使其始終顯示在關聯input元素的正上方或下方。這是相關的 HTML 代碼：<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100" [hidden]="!showStateDropdown">  <div class="spec-form-field drop-down" matAutocompleteOrigin #stateOrigin="matAutocompleteOrigin">    <mat-form-field>      <input type="text" #stateInput [formControl]="form.controls['state']" placeholder="{{ 'account_section.state' | translate }}" matInput [matAutocomplete]="state" (keyup)="isSelectedState = false; _filterSearch('state');" (blur)="removeUnusableValue();" (focus)="_filterSearch('state');"      [matAutocompleteConnectedTo]="stateOrigin">      <i class="material-icons">arrow_drop_down</i>    </mat-form-field>    <mat-autocomplete #state="matAutocomplete" (optionSelected)="isSelectedState = true;" (blur)="updateAccountData()">      <mat-option *ngFor="let state of states" [value]="state.iso">        {{ state.name }}      </mat-option>    </mat-autocomplete>  </div></div>然而，當涉及到mat-autocomplete國家時，事情就變得奇怪了。該下拉菜單將始終出現在窗口（瀏覽器）的左上角。當我檢查元素時，width和top的left屬性cdk-overlay-pane始終設置為0px。