Ionic Angular中如何将自动完成input改为select显示下拉箭头并保留功能

根本原因：你不需要将mat-autocomplete嵌套进mat-select，二者是Angular Material提供的两类独立选择组件，无法混用。你当前选中后无反应的核心问题是mat-select缺少必要的状态绑定和事件监听，没有把选中值同步到业务逻辑里，和缺少autocomplete无关。

修复步骤 #

• 给mat-select补充和原input一致的状态绑定，以及选中事件监听
  你原input的核心逻辑有三个：绑定formControl、双向绑定选中值、选中后触发loadContacts方法更新表格，把这几个逻辑迁移到mat-select上即可。
  修改后的代码如下：

<ion-col size="4" class="ion-text-left">
  <p class="filter__title">Company</p>
  <mat-form-field class="mat-form-control form_control-adjust">
    <mat-select 
      class="custom-dropdown"
      [formControl]="company"
      [(ngModel)]="selectedCompany"
      (selectionChange)="loadContacts($event.value)"
    >
      <mat-option 
        *ngFor="let client of clientsFiltered | async" 
        [value]="client"
      >
        <table class="autocomplete-table">
          <tr>
            <td class="text-crol" style="width: 20px">
              {{ client.name }}
            </td>
          </tr>
        </table>
      </mat-option>
    </mat-select>
  </mat-form-field>
</ion-col>

• 可选替代方案：不用替换input，直接给带autocomplete的input加下拉箭头
  如果你还需要保留原autocomplete的输入搜索功能，不需要换成mat-select，直接给input加一个matSuffix的图标即可获得同款下拉箭头，改造成本更低：

<ion-col size="4" class="ion-text-left">
  <p class="filter__title">Company</p>
  <mat-form-field class="mat-form-control form_control-adjust">
    <input #clientInput (keyup)="(0)"  [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
    <!-- 新增箭头后缀 -->
    <mat-icon matSuffix>arrow_drop_down</mat-icon>
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
      <mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
        <table class="autocomplete-table">
          <tr>
            <td class="text-crol" style="width: 20px">
              {{ client.name }}
            </td>
          </tr>
        </table>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</ion-col>

如果要调整箭头样式和原生select的箭头完全一致，补充少量CSS匹配样式即可。

内容的提问来源于stack exchange，提问作者Jesus