Доступ к свойствам выбранной опции модели вне тега автозаполнения

Question

Основываясь на примере Angular на официальном веб-сайте в разделе «Элементы управления формой> Автозаполнение» здесь , мне интересно, как можно получить свойства модели для отображения вне тега <mat-autocomplete> где-то в шаблоне?

Цель состоит в том, чтобы получить что-то вроде этого:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>


  <p> {{state.name}} </p>

</form>


 <p> {{state.name}} </p>

Я подозреваю, что это можно как-то сделать с помощью функции ngModel, но как?

Angular версия аналогична официальной демоверсии: 8.2.3

Answer 1

Взгляните на это. StackBlitz

Я добавил это в html (onSelectionChange) = "someFunction ($ event)"

[matAutocomplete] = "auto"

изменено на [value] = "state"

и изменено личное _filterStates в файле ts

надеюсь, это поможет.