Как я могу добавить стрелку раскрывающегося списка в поле ввода в автозаполнение мат - PullRequest
Новая
       31

Как я могу добавить стрелку раскрывающегося списка в поле ввода в автозаполнение мат

0 голосов
/ 08 апреля 2019

Я использую mat-autocomplete для фильтрации моих данных.Все работает, но я хочу иметь стрелку раскрывающегося списка, чтобы показать все опции во входных данных.В md-autocomplete мы можем использовать dropdown-arrow = "true" , но в 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>

Ответы [ 2 ]

1 голос
/ 08 апреля 2019

по сути, вы присоединяете mat-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>
1 голос
/ 08 апреля 2019

Вы можете добавить mat-icon сразу после <input> элемента управления и придать некоторый стиль позиционированию и убедиться, что используете 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
}
...