垫自动完成不适用于数据绑定

Question

我尝试在我的 Angular 8 应用程序中使用 Angular Material。我想做的是：

1. 在 mat-input 中输入内容后，进行 Ajax 调用以检索部门列表。
2. 在自动填充中显示部门列表并显示部门名称。
3. 当用户更改选择时调用一个函数。

一切正常，除了我无法让数据绑定 (ngModel) 工作。因此，用户选择的值不会显示在输入中，并且在页面加载时，保存的值也不会显示。这是我的代码：

                             <input name="designation" type="text" class="form-control matInputDesignation"
                                    matInput [formControl]="myControl" [(ngModel)]="topManagement.age"
                                    [matAutocomplete]="auto" required>
                                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
                                    [displayWith]="displayFn"
                                    (optionSelected)='setDesignationName($event.option.value)'>
                                    <mat-option *ngFor="let designation of filteredOptions | async"
                                        [value]="designation.id">
                                        {{designation.designationName}}
                                    </mat-option>
                                </mat-autocomplete>

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  debounceTime(300),
  switchMap(value => {
    if (value !== '' && value.length >= 3) {
      return this._search(value);
    } else {
      return of(null);
    }
  })
);

setDesignationName(opt) {
this.topManagement.designation = opt;

}

Answer 1

您不应该尝试同时使用 [formControl] 和 ngModel，这可能是问题之一。