如何在材料自动完成组件中获得对垫选项对象的引用

Question

我试图用材料的自动完成功能代替boostrap的组合框，而无需重构以前的许多代码。

这是新材料自动完成的html的样子：

<input matInput placeholder="New room" aria-label="Newsroom Source" [matAutocomplete]="autoGroup" [formControl]="newsRoomCtrl" [value] = 'selectedNewsFeed.sourceName'>
<mat-autocomplete #autoGroup="matAutocomplete" (optionSelected)='onNewsRoomSelect($event.value)'   >
    <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>

在'（optionSelected）'事件中，我通过使用event.value将选定的新闻编辑室源作为对象传递给函数， onNewsRoomSelect(selectedNewsRoom: NewsRoomSource)调用onNewsRoomSelect(selectedNewsRoom: NewsRoomSource) NewsRoomSource）函数。

这很好用，但问题是在这种情况下输入的值变成了对象，而NewsRoomSource对象变成了对象，这就是我在选择后在输入中看到的；

选择：

选择后：

现在，我理解了为什么在将mat-input标签的[value]设置为对象（即newsroomsource）时会发生这种情况，但是我不知道如果不这样做，我还能如何引用所选对象。

正如您在代码中看到的那样，我尝试使用数据属性，但不确定在这种情况下如何使用它

Answer 1

在这种情况下， newsRoomCtrl通过打印此变量console.log(newsRoomCtrl);尝试选择对象console.log(newsRoomCtrl);

最后，我认为它将是这样，请看一下对象结构以确保。

    <input matInput placeholder="New room" aria-label="Newsroom Source" [matAutocomplete]="autoGroup" 
[formControl]="newsRoomCtrl" [value] = 'newsRoomCtrl.value.sourceName'>