Angular 访问模型&x27；s自动完成标记外所选选项的属性

基于其官方网站“表单控件>自动完成”一节中的Angular示例，我想知道如何让模型的属性显示在模板中某个位置的标记

之外

我们的目标是实现这样的目标：

<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>

{{state.name}|
人口：{{state.Population}
{{state.name}

{{state.name}

我怀疑这可以通过

ngModel

功能实现，但如何实现呢

Angular版本与官方演示版相同：8.2.3

我已将此添加到html中 （onSelectionChange）=“someFunction（$event）”

[matAutocomplete]=“自动”

更改为[值]=“状态”

并更改了ts文件中的私有过滤器状态

---

希望有帮助。

为什么不能使用MatAutocompleteSelectedEvent调用一个函数，将所选信息添加到显示信息的对象中？我尝试过，问题是我必须将模型本身作为所选选项发送，以在组件中处理它，并在此处指定模型

[value]=“state”

然后在自动完成输入中的选择上显示！你能做一个StackBlitz吗？这是一个基本的官方演示：我对此无能为力。你能把你的代码放在stackblitz上吗？谢谢，它按预期工作。此外，由于我的Angular版本“8.2.3”与StackBlitz演示版“8.2.9”中的不同，我必须将事件属性

（onSelectionChange）

替换为

（optionSelected）

，以使其正常工作。