mat-autocomplete 下拉菜单显示在窗口的左上方 [Angular]答案

【问题标题】：mat-autocomplete dropdown shows up on top left of the window [Angular]mat-autocomplete 下拉菜单显示在窗口的左上方 [Angular]
【发布时间】：2020-08-03 12:58:35
【问题描述】：

现在我正在处理一个 Angular 项目，在这个项目中有一个页面，其中包含 2 个mat-autocomplete 组件，一个用于选择国家，另一个用于选择状态。状态一可以正常工作，所有东西都留在预期的地方，如下所示：

检查元素会显示有意义的属性。对于类名为cdk-overlay-pane（图中突出显示）的div，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 时，事情变得很奇怪。此下拉菜单将始终显示在窗口（浏览器）的左上角。

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

但是，我无法找到国家和州之间的实际区别，除了在国家/地区中说“国家”的所有内容都替换为“国家”。这是 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>

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

这里是这个项目中使用的组件和模块的版本号，以防有人想看看。

感谢任何帮助。

【问题讨论】：

标签： html angular autocomplete angular-material mat-autocomplete

【解决方案1】：

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

【讨论】：