5

我使用 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>
4

5 回答 5

5

本质上，您正在附加 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>
于 2019-04-08T07:33:39.463 回答
3

您可以在<input>控制之后添加 mat-icon 并给出一些样式来定位它并确保使用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
}
于 2019-04-08T07:01:20.960 回答
2

使用FontAwesome（或任何其他图标库，只要您知道插入符号图标的代码），我使用以下 CSS 完成了它：

input + mat-autocomplete:after {
    content: "\f0d7";
    font-family: "FontAwesome";
    right: 0;
    bottom: 4px;
    position: absolute;
    color: dimgrey;
    pointer-events: none;
}

为了增加效果，您可以添加以下规则以在下拉展开时向上切换箭头：

input[aria-expanded="true"] + mat-autocomplete:after {
    content: "\f0d8";
}

如果您不想使用图标库，您可以使用Unicode black down-pointing triangle。

哦，你的目标浏览器需要支持同级 CSS 运算符。

于 2019-08-02T15:00:59.333 回答
2

只是改进 Nakul 的答案。输入后使用 matSuffix 创建 mat-icon 或 span 并将自动完成事件绑定到隐藏/显示下拉箭头

<mat-form-field class="example-full-width">
       
  <!-- Input -->
  <mat-label>Assignee</mat-label>
  <input
    type="text"
    matInput
    [formControl]="myControl"
    [matAutocomplete]="auto"/>

  <!-- Mat-Icon or Span -->
  <mat-icon matSuffix>
    <button style="padding: 0; margin: 0; border: 0; background-color: transparent;">
      <span class="material-icons" matTooltip="Click to select an User">
        {{arrowIcon}}
      </span>
    </button>
  </mat-icon>

  <!-- Auto Complete -->        
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"
    (opened)="arrowIcon='arrow_drop_up'"
    (closed)="arrowIcon='arrow_drop_down'"
    (optionSelected)="arrowIcon='arrow_drop_down'">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option.name}}
  </mat-option>
  </mat-autocomplete>
</mat-form-field>

  1. arrowIcon在存储当前图标名称的TypeScript 文件中声明变量

  2. mat-icon当用户将鼠标悬停在箭头图标上时，在内部创建按钮以显示用户手而不是指针

  3. 利用(opened),(closed)和(optionSelected)事件更改下拉图标名称

这是工作中的StackBlitz演示

于 2020-12-18T13:58:40.790 回答
0

我更喜欢我为公司提供的解决方案，因为它提供了可能包含在同一页面/表单中的其他 mat-select 控件的外观和感觉。

        <mat-icon class="aggregator-arrow-selector" matSuffix>
          <div class="mat-select-arrow-wrapper" (click)="openFullAggregatorsList()">
            <div class="mat-select-arrow">
            </div>
          </div>
        </mat-icon>

秘诀是在 mat-icon 内添加 mat-select 材质控件中使用的相同 div 内容（包括箭头选择的材质类）。我需要在我的 css 类 .aggregator-arrow-selector {height: 8px} 中更改 mat-icon 的高度

          <mat-form-field class="col">
        <mat-label>Select Aggregator</mat-label>
        <input type="text"
               placeholder="Type to Search"
               aria-label="Aggregator Name"
               [title]="displayAggregatorTitle(null)"
               matInput
               (click)="setDefaultAggregatorPipe()"
               formControlName="aggregatorControl"
               [matAutocomplete]="auto">
        <mat-icon class="aggregator-arrow-selector" matSuffix>
          <div class="mat-select-arrow-wrapper" (click)="openFullAggregatorsList()">
            <div class="mat-select-arrow">
            </div>
          </div>
        </mat-icon>
        <mat-autocomplete #auto="matAutocomplete" placeholder="Aggregator"
                          [displayWith]="displayAggregatorFn"
                          (optionSelected)="onSelectedAggregator($event)">
          <mat-option *ngFor="let aggregator of aggregatorsFilteredList | async" [value]="aggregator">
            <div class="aggregator-item" [title]="displayAggregatorTitle(aggregator)">
              <div class="aggregator-part">{{ aggregator['name'] }}</div>
              <span class="separator">|</span>
              <div class="aggregator-part">{{ aggregator['externalId'] }}</div>
            </div>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

mat-autocomplete 中的下拉箭头

于 2021-11-08T10:40:15.713 回答