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

Question

我使用 mat-autocomplete 来过滤我的数据。一切正常，但我想要一个下拉箭头来显示输入中的所有选项。
在 md-autocomplete 中，我们可以使用 下拉箭头=“真”但在 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可以添加图标like this .

你的代码应该是这样的 -

<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>