mat-autocomplete для использования с кнопкой (например, md-autocomplete) - PullRequest
Новая
       11

mat-autocomplete для использования с кнопкой (например, md-autocomplete)

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

В Angular Material 1 можно было открыть раскрывающийся список md-autocomplete одним нажатием кнопки (cf doc ).

В Angular Material 2 я не вижу такой возможности с mat-autocomplete (ср. doc ). Это все еще возможно каким-то образом? Как ? Я думал о том, чтобы скрыть input и вызвать openPanel, но для такого простого использования это кажется немного излишним ...

Спасибо за вашу помощь

[править]
Пока мой код такой (я не добавил кнопку, так как не уверен, что это правильно) 

<mat-form-field>
      <input type="text" placeholder="Pronostique le futur vainqueur" aria-label="Vainqueur" matInput
             [(ngModel)]="worldcupWinner" name="worldcupWinner" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let team of teams" [value]="team">
          <img class="flag" [src]="team.flag_url" />
          <span class="label">{{ team.name }}</span>
        </mat-option>
      </mat-autocomplete>
</mat-form-field>

1 Ответ

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

Если вы добавите свой код, я добавлю ссылку и вызов функции к нему.

редактировать 

<mat-form-field>
  <input #trigger="matAutocompleteTrigger" type="text" placeholder="Pronostique le futur vainqueur" aria-label="Vainqueur" matInput [(ngModel)]="worldcupWinner" name="worldcupWinner" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let team of teams" [value]="team">
      <img class="flag" [src]="team.flag_url" />
      <span class="label">{{ team.name }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<button mat-raised-button (click)="openThatPanel()">OPEN IT</button>

component.ts: 

@ViewChild('trigger') trigger: MatAutocompleteTrigger;

openThatPanel() {
  setTimeout(_ => this.trigger.openPanel());
}

К сожалению, я не могу открыть его без setTimeout вокруг trigger.openPanel ().

...