Angular 手动角度自动完成设定值

我一直在使用自动完成材质组件。我想使用

setValue

方法手动（在对话框组件关闭后）在自动完成输入中设置新值

我不明白为什么

setValue

不足以在自动完成输入中手动设置值。我也读过这篇文章，但没有成功

这是我的.ts代码

export class FuncionesComponent implements OnInit {

  private subs = new Subscription();

  myForm:FormGroup;
  funcionesList: FuncionI[];
  filteredOptionsFunciones: Observable<FuncionI[]>;

  constructor (private funciones_srv:FuncionesService)
    {
      this._getFuncionesData();
    }

  private _getFuncionesData():void {

    this.funciones_srv.getFunciones().subscribe(data=>{
      this.funcionesList = data;
      this.filteredOptionsFunciones = this.myForm.get('idFuncion').valueChanges
      .pipe(
        startWith<string | FuncionI>(''),
        map(value => typeof value === 'string' ? value : value.nombre),
        map((nombre:string | null) => nombre ? this._filterFunciones(nombre) : this.funcionesList.slice())
      );
    })
  }

  public displayFuncion(options: FuncionI[]): (id: number) => string {
    return (id: number) => {
      const correspondingOption = Array.isArray(this.funcionesList) ? options.find(option => option.idFuncion === id) : null;
      return correspondingOption ? correspondingOption.nombre : '';
    }
  }

  private _filterFunciones(name: string): FuncionI[] {
    const filterValue = name.toLowerCase();
    return this.funcionesList.filter(option => option.nombre.toLowerCase().indexOf(filterValue) === 0);
  }

  onSetValue() {
    data = {idFuncion: 5, nombre: "new function"}
    this.myForm.controls['idFuncion'].setValue(data)

  }

}

导出类函数组件实现OnInit{
private subs=新订阅（）；
myForm:FormGroup；
功能列表：功能i[]；
滤光片滤光片：可见；
构造函数（私有函数\u srv:FunctioneService）
{
这是。_getfunctionesdata（）；
}
private _getFunctioneSdata（）：void{
this.functiones_srv.getfunctiones（）.subscribe（数据=>{
this.functioneslist=数据；
this.FilteredoptionsFunctions=this.myForm.get（'IDBunceOn'）。valueChanges
.烟斗(
startWith（“”），
映射（值=>typeof值=='string'？值：value.nombre），
map（（nombre:string | null）=>nombre？this.\u filterFunctions（nombre）：this.functionesList.slice（）
);
})
}
public displayFunction（选项：functioni[]）：（id:number）=>string{
返回（id:number）=>{
const correspondingOption=Array.isArray（this.functioneslist）？options.find（option=>option.idbunceon==id）：null；
返回对应选项？对应选项。名称：“”；
}
}
private _filterFunctions（名称：string）：functioni[]{
常量filterValue=name.toLowerCase（）；
返回此.FunctioneSList.filter（option=>option.nombre.toLowerCase（）.indexOf（filterValue）==0）；
}
onSetValue（）{
数据={IDBunceon:5，名称：“新函数”}
this.myForm.controls['IDBunchon'].setValue（数据）
}
}

这是我的.html代码

  <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">

          <div class="basic-container">
            <mat-form-field class="example-full-width">
              <input type="text" placeholder="Función*" aria-label="Number" matInput formControlName="idFuncion"
                [matAutocomplete]="autoFuncion">
              <mat-error>Este campo es obligatorio!</mat-error>
              <mat-autocomplete autoActiveFirstOption #autoFuncion="matAutocomplete"
                [displayWith]="displayFuncion(filteredOptionsFunciones | async)">
                <mat-option *ngFor="let option of filteredOptionsFunciones | async" [value]="option.idFuncion">
                  <p>{{option.nombre}}</p>
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
          </div>

          <div mat-dialog-actions>
            <button mat-raised-button color="primary" type="button" (click)="onSetValue()">Set value manually</button>
          </div>
        </div>
  </form>

埃斯特坎波是义务！
{{option.nombre}}

手动设置值