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

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版本和官方demo一样：8.2.3

标签： angularautocompleteangular-material

Answer 1

看看这个。StackBlitz

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

[matAutocomplete]="自动"

更改为 [value]="state" 

并更改了 ts 文件中的私有 _filterStates

希望能帮助到你。