Angular Material自动完成组件中如何获取mat-option引用并修复输入框显示问题

这个问题其实很常见，Angular Material的Autocomplete专门提供了displayWith属性来处理这种场景——既让输入框显示友好的文本，又能在选中时拿到完整的对象引用，完全不用重构你现有的核心逻辑。

具体解决步骤： #

1. 在组件类中添加显示文本的处理函数
   这个函数接收选中的NewsRoomSource对象，返回你想要在输入框中显示的文本（比如sourceName）：

   displayNewsRoomSource(source: News NewsRoomSource): string {
     return source ? source.sourceName : '';
   }
   

2. 修改Autocomplete模板，绑定displayWith
   在你的mat-autocomplete标签上添加[displayWith]属性，指向上面定义的函数。这样输入框就会显示函数返回的文本，而[value]依然保持为完整对象，不影响optionSelected事件的逻辑：

   <input matInput placeholder="New room" aria-label="Newsroom Source" 
          [matAutocomplete]="autoGroup" [formControl]="newsRoomCtrl" 
          [value]='selectedNewsFeed.sourceName'>
   <mat-autocomplete #autoGroup="matAutocomplete" 
                     (optionSelected)='onNewsRoomSelect($event.value)'
                     [displayWith]="displayNewsRoomSource"> <!-- 新增这行 -->
     <mat-option *ngFor="let newsroomsource of filteredNewsRoomSources | async" 
                 [value]="newsroomsource" [attr.data-row]="newsroomsource">
       <span>{{ newsroomsource.sourceName }}</span> | <small>Type: {{ newsroomsource.sourceType }}</small>
     </mat-option>
   </mat-autocomplete>
   

为什么这个方案可行？ #

• displayWith是Angular Material为Autocomplete设计的官方解决方案，专门用来分离"选中的对象"和"输入框显示的文本"。
• 你的onNewsRoomSelect函数依然能拿到完整的NewsRoomSource对象，因为mat-option的[value]还是绑定的对象，完全不需要修改这部分逻辑。

关于你提到的data属性方案（可选） #

如果你之前想尝试用data属性，其实也可以，但不如displayWith优雅。比如你可以把[value]设为newsroomsource.sourceName，然后在mat-option上绑定[data-source]="newsroomsource"，之后在optionSelected事件里通过$event.option.dataSource获取对象，但这样需要额外的属性绑定，而且当有同名sourceName时可能出问题，所以还是推荐官方的displayWith方案。

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