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

Question

现在我正在做一个 Angular 项目，在这个项目中有一个包含 2 个 mat-autocomplete 组件的页面，一个用于选择国家，另一个用于选择州。 state one 工作正常，一切都停留在预期的位置，如下所示：

检查元素会显示有意义的属性。对于 div 和 class 名称 cdk-overlay-pane（图中突出显示），width 是 350px，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 时，事情就变得很奇怪了。这个下拉列表将始终出现在 window（浏览器）的左上角。

并且当我检查元素时，cdk-overlay-pane 的 width、top 和 left 属性始终设置为 0px。

但是，我无法找到国家和州之间的实际差异，只是在国家/地区中所有显示 "state" 的内容都被替换为 "country"。这是 HTML 代码：

<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100">
  <div class="spec-form-field drop-down" matAutocompleteOrigin #countryOrigin="matAutocompleteOrigin">
    <mat-form-field>
      <input type="text" #countryInput [formControl]="form.controls['country']" placeholder="{{ 'account_section.country' | translate }}"  matInput [matAutocomplete]="country" (keyup)="checkKeycode($event.keyCode,'country');" (blur)="removeUnusableValue();" (focus)="_filterSearch('country');"
      [matAutocompleteConnectedTo]="countryOrigin">
      <i class="material-icons">arrow_drop_down</i>
    </mat-form-field>
    <mat-autocomplete #country="matAutocomplete" (optionSelected)="changeCountry()" (blur)="updateAccountData()">
      <mat-option *ngFor="let country of countries" [value]="country.iso">
        {{ country.name }}
      </mat-option>
    </mat-autocomplete>
  </div>
</div>

老实说，我不知道为什么国家不能正常工作。一切似乎都很好，但最终结果却并非如此。

这里是这个项目中使用的组件和模块的版本号，以备不时之需。

感谢任何帮助。

Answer 1

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

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

mat-autocomplete dropdown shows up on top left of the window [Angular]

html

autocomplete

angular-material

angular

mat-autocomplete