mat-autocomplete 下拉列表显示在窗口的左上角 [Angular]

Question

现在我正在开发一个 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。

Answer 1

#countryInput完成这篇文章后，我刚刚仔细检查了 HTML 文件，并在 HTML 文件的底部发现了一个具有相同组件的不同组件。看起来修改该文件的人忘记将其与原始文件区分开来。我就留下这个问题作为参考。