角度材料自动完成可防止 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()是设置对象，而不仅仅是要显示的值。

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

小例子