1

Angular Material 1 ではmd-autocomplete、ボタンをクリックしてドロップダウンを開くことができました (ドキュメントを参照)。

mat-autocompleteAngular Material 2 では、 (cf doc )でこの可能性は見られません。これは何らかの形でまだ可能ですか？どのように ？inputhidden と triggerを考えていました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>
4

1 に答える 1

1

コードを追加すると、参照と関数呼び出しが追加されます。

編集

<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());
}

残念ながら、trigger.openPanel() の周りに setTimeout がないと開くことができません。

于 2018-05-15T12:28:12.600 に答える