Mat自动完成功能不适用于数据绑定

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，这可能是问题之一。