Angular mat-select，为项目列表和 selected 项目设置不同的模板

Question

我在 Angular 中使用垫选项，如下所示：

 <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

我希望 mat-select 列表中的模板不同于 mat-form-field 中 selected 项目的模板。

例如，如果我选择Banana，mat-form-field将显示you chose: Banana 但列表中的项目仍然只是香蕉。

Answer 1

我用mat-select-trigger

解决了

然后在里面放任何你想要的模板。

<mat-select-trigger>
      {{"you chose:" + GetSelectedName()}}
</<mat-select-trigger>

Angular mat-select, Set different template for items list and selected item