angular - 如何在 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>

标签： angularangular-materialmat-autocomplete

Answer 1

本质上，您正在附加 anmat-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>