将自动完成面板始终保持在输入元素上方答案

【问题标题】：Keep the autocomplete panel always above the input element将自动完成面板始终保持在输入元素上方
【发布时间】：2020-10-06 01:02:36
【问题描述】：

我正在使用 Angular Material 版本 7，我想问一下如何将自动完成面板的位置始终保持在输入“上方”。现在，如果下方还有空间，自动完成面板将显示在下方。只有当下方没有更多空间时，它才会显示在上方。我想一直显示在上面。

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

【问题讨论】：

标签： angular angular-material angular-material-7

【解决方案1】：

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" position='above'>
</mat-form-field>

文档在这里：https://material.angular.io/components/autocomplete/api

【讨论】：

对不起，我错过了。 position 属性仅在版本 8 中引入。在版本 7 中实现起来会很痛苦。我宁愿推迟项目中的这种更改，直到可以更新到更新的 Angular Material 版本。