访问模型在自动完成标记之外的所选选项的属性

Question

基于其官方网站中的Angular示例，第"Form Controls > Autocomplete" here部分，我想知道我们如何才能让模型的属性显示在标签<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版本与官方demo相同：8.2.3

Answer 1

看看这个。 StackBlitz

我已将此添加到 html (onSelectionChange)="someFunction($event)"

[matAutocomplete]="auto"

更改为 [值]="state"

并更改了 ts 文件中的 private _filterStates

希望对您有所帮助。

访问模型在自动完成标记之外的所选选项的属性

Access model's properties of selected option outside autocomplete tag

autocomplete

angular-material

angular