更改选择离子角度的输入控制

Question

我是 ionic angular 的新手，所以我有一个表格，我在其中使用 select 作为：

         <ion-row>
                <ion-col size="3">
                  <mat-form-field appearance="fill">
                    <mat-label>Per page</mat-label>
                    <select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
                      <option value="10">10</option>
                      <option value="20">20</option>
                      <option value="30">30</option>
                      <option value="40">40</option>
                    </select>
                  </mat-form-field>
                </ion-col>
              </ion-row>

所以它显示如下：

如您所见，它有一个向下的箭头。我想要输入相同的箭头，我当前的输入：

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

是否可以将input 更改为select 以显示向下箭头？

作为 Chiranjaya Denuwan 评论下面我将其更改为：

 <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">
                        <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-select>
                    </mat-form-field>

它按我的意愿显示，问题不是在选择更改时更改表，我认为是因为我缺少原始输入中的<mat-autocomplete>，但是当我尝试添加时，它只是不加载任何选项在选择中

Answer 1

这里可以使用 Angular 材质选择。

在 mat-select 中输入一个类属性

<mat-form-field appearance="fill">
      <mat-label>Favorite food</mat-label>
      <mat-select class="custom-dropdown">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
</mat-form-field>

然后是 CSS，

.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
  visibility: hidden;
}