时间戳

首页 > 解决方案 > mat-autocomplete 下拉菜单显示在窗口的左上方 [Angular]

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

问题描述

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

状态的垫子自动完成

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

国家/地区的垫子自动完成

当我检查元素时width，top和left的属性cdk-overlay-pane总是设置为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>

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

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

版本号

任何帮助表示赞赏。

标签： htmlangularautocompleteangular-materialmat-autocomplete

解决方案

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

推荐阅读