时间戳

首页 > 解决方案 > 与按钮一起使用的 mat-autocomplete（如 md-autocomplete）

angular - 与按钮一起使用的 mat-autocomplete（如 md-autocomplete）

问题描述

在 Angular Material 1 中，可以通过单击按钮打开md-autocomplete下拉列表（参见doc）。

mat-autocomplete在 Angular Material 2 中，我认为(cf 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>

标签： angularangular-material2mat-autocomplete

解决方案

如果您添加代码，我将添加引用和函数调用。

编辑

<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>

组件.ts：

@ViewChild('trigger') trigger: MatAutocompleteTrigger;

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

不幸的是，在 trigger.openPanel() 周围没有 setTimeout 的情况下，我无法打开它。

推荐阅读