Angular中mat-select选中后仅显示item.name的实现方法

要实现选中选项后只展示item.name，核心是自定义mat-select的选中态显示内容，用mat-select-trigger就能轻松搞定，具体步骤如下：

方法：使用mat-select-trigger自定义选中显示 #

在你的mat-select组件内部添加mat-select-trigger标签，专门指定选中后要展示的内容，同时保留选项内部的完整信息：

模板代码 #

<mat-select [(value)]="selectedAccount">
  <!-- 自定义选中后的显示内容，只展示名称 -->
  <mat-select-trigger>{{ selectedAccount }}</mat-select-trigger>

  <mat-option *ngFor="let item of allAccount" [value]="item.name">
    <!-- 选项内同时显示名称和金额 -->
    <span>{{ item.name }}</span>
    <span style="margin-left: 12px;">{{ item.amount }}</span>
  </mat-option>
</mat-select>

组件代码 #

// 定义选中值变量，可设置默认选中项
selectedAccount: string = 'All Accounts';

allAccount = [
    { name: 'All Accounts', amount: 140853.47},
    { name: 'Credit Card ',amount: '-455.15' },
];

原理说明 #

mat-select默认会把选中的mat-option里的所有内容作为显示值，所以之前会拼接名称和金额。而mat-select-trigger会覆盖这个默认行为，强制展示我们指定的selectedAccount（也就是绑定的item.name），同时不影响选项列表里的内容展示。

内容的提问来源于stack exchange，提问作者Hena fufa