如何在 mat-autocomplete 的输入中添加下拉箭头

Question

我使用 mat-autocomplete 来过滤我的数据。一切正常，但我想要一个下拉箭头来显示输入中的所有选项。在 md-autocomplete 中，我们可以使用dropdown-arrow="true"但在 mat-autocomplete 中不支持它。那么如何在 mat-autocomplete 中添加下拉箭头呢？这是我的component.ts

<form class="example-form">
    <mat-form-field class="example-full-width">  

    <input type="text" aria-label="Number" matInput 
    [formControl]="myControl" [matAutocomplete]="auto4"
    [hidden]="loadWithFilters&&loadWithFilters.field==='IP'">  

    <mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true" 
    (optionSelected)="onFilterOptionSelected($event,'IP')" >  

    <mat-option *ngFor="let option of filteredIP | async" 
    [value]="option.key">
        {{option.value}}
    </mat-option>
   </mat-autocomplete>  
   </mat-form-field>
</form>

Answer 1

本质上，您将mat-autocomplete与附加在一起matInput，因此您可以form-field单独设置样式，然后将 附加mat-autocomplete到它。

请参阅此stackblitz以获取完整的代码演示。

form-field可以像这样添加图标。

你的代码应该是这样的 -

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto4"/>
        <mat-icon matSuffix>keyboard_arrow_down</mat-icon>

        <mat-autocomplete autoActiveFirstOption #auto4="matAutocomplete" (optionSelected)="onFilterOptionSelected($event)" >
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

Answer 2

您可以在控件之后添加垫子图标<input>，并提供一些样式来定位它并确保使用position: absolute

<form class="example-form">
    <mat-form-field class="example-full-width">  

        <input type="text" aria-label="Number" matInput 
        [formControl]="myControl" [matAutocomplete]="auto4"
        [hidden]="loadWithFilters&&loadWithFilters.field==='IP'"> 

        <i class="material-icons align-arrow-right">arrow_drop_down</i>

        <mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true" 
        (optionSelected)="onFilterOptionSelected($event,'IP')" >  

        <mat-option *ngFor="let option of filteredIP | async" 
        [value]="option.key">
            {{option.value}}
        </mat-option>
       </mat-autocomplete>  
   </mat-form-field>
</form>

在 CSS 文件中

.align-arrow-right {
    position: absolute;
    right: 0; //change as per requirement
    top: 0; //change as per requirement
}