Как получить ссылку на объект mat-option в компоненте автозаполнения материала

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)' Я вызываю функцию onNewsRoomSelect(selectedNewsRoom: NewsRoomSource), передавая выбранный источник новостей как объект, используя event.value

Это работает нормально, но проблема в том, что значение ввода становится объектом в этомcase и NewsRoomSource объект, и это то, что я вижу на входе после выбора;

Выбор:

После выбора:

Теперь я понимаю, почему это происходит, когда я устанавливаю [значение] тега mat-input для объекта, т.е. источника новостей, но я не знаю, как еще я могу ссылаться навыбранный объект, если я не делаю этого.

Как вы можете видеть в коде, я пытался использовать атрибут данных, но не был уверен, как именно я могу использовать его в этом случае

Answer 1

В этом случае newsRoomCtrl имеет ссылку на выбранный объект, попробуйте распечатать эту переменную console.log(newsRoomCtrl);

Наконец, я думаю, что это будет так, взгляните на структуру объекта, чтобы бытьконечно.

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