mat-autocomplete与按钮一起使用(如MD-autocomplete)



在 Angular Material 1 中,可以通过单击按钮打开md-autocomplete下拉列表(参见文档(。

在角度材料 2 中,我在mat-autocomplete中看不到这种可能性(参见文档(。这在某种程度上还有可能吗?如何?我正在考虑隐藏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>

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

编辑

<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(( 的设置超时,我无法打开它。

最新更新