angular - Mat-Select 仅在单击底线时打开

Question

我从 Angular 材料 (TS) 实现了 Mat-Select 并注意到了有趣的行为。在单击 mat-select 的底线之前，下拉菜单不会打开，我知道当我之前使用 Mat-select 字段时，当我单击字段上的任何位置时它会打开。问题是什么？

  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{
        topping
      }}</mat-option>
    </mat-select>
  </mat-form-field>

标签： angulartypescriptangular-material

Answer 1

从文档 https://material.angular.io/components/select/overview

---

可能是缓存问题或动态数据必须延迟加载（添加条件可能会有所帮助）

Stackblits-
https://stackblitz.com/angular/rdlobdgvqok?file=src%2Fapp%2Fselect-overview-example.ts

<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

这肯定会解决你的问题