如何在材质自动完成组件

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将选定的newsroomsource作为对象传递来调用函数onNewsRoomSelect(selectedNewsRoom: NewsRoomSource)

这很好用，但问题是输入的值在这种情况下成为一个对象和NewsRoomSource对象，这就是我在选择后在输入中看到的内容;

选择：

选择后：

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

正如您在代码中看到的那样，我尝试使用data-attribute但不确定在这种情况下我究竟能使用它

Answer 1

在这种情况下，newsRoomCtrl具有所选对象的引用，请尝试打印此变量console.log(newsRoomCtrl);

最后我觉得它会是这样的，看看对象结构是否确定。

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