автозаполнение углового материала не позволяет реактиву setValue работать

Question

Edit: Решено с комментарием Jojofoulk.

при использовании автозаполнения компонентов углового материала, Я пытаюсь использовать setValue для формы ввода, но ее атрибут [matAutocomplete] не позволяет отображать setValue на входе.

Проверка реактивного контроля показывает, что значение правильное, а удаление [matAutocomplete] заставляет его работать, но с этим это просто не обнаруживается.

<mat-list-item role="listitem" *ngFor="let skill of curObj.skills;index as ind">
  <div>
    <mat-form-field>
      <input type="text" placeholder="choose skill" aria-label="Number" matInput [formControl]="skill.control" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="optSel($event.option.value,skill)">
        <mat-option *ngFor="let option of skill.filteredOptions | async" [value]="option">
          {{option.name}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
</mat-list-item>

skill.control.setValue("some new value");

Answer 1

displayFn принимает вход для его отображения по-другому (обычно это свойство объекта на вашем входе), но он принимает весь объект! Вы должны убедиться, что вы используете setValue() для установки объекта, а не только значение, которое вы хотите отобразить.

Ввод должен содержать весь объект, когда вы соединяете его с [matAutoComplete], используя [displayWith], displayFn позаботится о заполнении вашего ввода.

Маленький пример