手动角自动完成setValue

问题描述

我被自动填充材料组件困住了。我想使用setValue方法来手动（在对话框组件关闭之后）将新值设置为自动完成输入。

我不知道为什么setValue不足以手动在自动完成输入中设置值。我也读过this post帖子，但没有成功。

这是我的.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)

  }

}

这是我的.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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）