Открыть matAutocomplete с помощью метода open openPanel () - PullRequest
Новая
       24

Открыть matAutocomplete с помощью метода open openPanel ()

0 голосов
/ 23 мая 2018

Я работаю с компонентом Angular Material matAutocomplete , и в соответствии с docs существует метод, который может открывать / закрывать панель автозаполнения с помощьюметод openPanel () / closePanel ().Любое предложение, как я могу интегрировать его в уже работающий пример?

Вот то, что я сделал с живым примером , пытаясь реализовать эту функцию.

Ответы [ 3 ]

0 голосов

в шаблоне 

<button (click)='openPanel($event)'>Open</button>

<input #inputAutoComplit>

в тс 

@ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) inputAutoComplit: MatAutocompleteTrigger;


openPanel(evt): void {
  evt.stopPropagation();
  this.inputAutoComplit.openPanel();
}
0 голосов
/ 19 июля 2019

Материальная документация должна быть более понятной.В то время как есть различные гимнастические процедуры, которые вы можете сделать для достижения этой функциональности (например, манипулирование объектом документа, использование @ViewChild или создание прослушивателей событий), для меня это сводится к двум следующим способам:

1 Минималист:

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="$event.stopPropagation(); trigger.openPanel()">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

Здесь мы присоединяем директиву MatAutoCompleteTrigger к входу и присваиваем ее переменной с именем trigger.Эта директива триггера передается методу click для каждого mat-option, который срабатывает каждый раз, когда в меню выбирается опция.Директива содержит два соответствующих метода .Здесь мы называем openPanel.Мы вызываем stopPropagation для объекта $event, чтобы собственные методы не делали ничего неожиданного.

2 Явный:

.html 

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="selectionMade($event, trigger)">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

.ts 

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

...

selectionMade(ev: Event, trigger: MatAutocompleteTrigger) {
    event.stopPropagation();
    trigger.openPanel();
}

Здесь мы передаем объект директивы и события функции в файле .ts компонента и выполняем ту же логику, что и в первом подходе.Если общее разделение интересов является проблемой, поступайте так.Для таких небольших работ я предпочитаю минималистский подход, но я полагаю, что каждый свой.

0 голосов
/ 23 мая 2018

Пожалуйста, добавьте stopPropagation или отложите openPanel, используя setTimeout, следующим образом.

Потому что при нажатии кнопки «конец» фокус переходит с поля ввода назад на кнопку ur, поэтому автозаполнение сразу скрывается

Опция 1: СтопРаспространение 

<button (click)="openAutocomplete($event)">toggle autocomplete (1 way)</button>
...
openAutocomplete(evt) {
  evt.stopPropagation()
  this.autoTrigger.openPanel();
}

Вариант 2 - SetTimeout 

openAutocomplete() {
  setTimeout(() => {
    this.autoTrigger.openPanel();
  }, 0)
}
...