angular material 自动完成阻止了 setValue 的响应工作

Question

编辑：已通过 Jojofoulk 的评论解决。

使用 angular-material 的自动完成组件时，我正在尝试对输入表单使用 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() 来设置一个对象，而不仅仅是您想要显示的值。

当您使用 [displayWith] 将它与 [matAutoComplete] 耦合时，输入应该包含整个对象，displayFn 将负责填充您的输入。

Little example

angular material 自动完成阻止了 setValue 的响应工作

angular material autocomplete prevents reactive from setValue from working

autocomplete

setvalue

angular-material

angular

angular-reactive-forms