Question

编辑：解决了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将负责填充输入。

Little example

角材料自动完成功能可防止setValue的反应性起作用

1 个答案: