角度材料自动完成可防止 setValue 的反应性工作答案

【问题标题】：angular material autocomplete prevents reactive from setValue from working角度材料自动完成可防止 setValue 的反应性工作
【发布时间】：2019-10-20 14:26:33
【问题描述】：

编辑：由 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");

【问题讨论】：

为什么你想要一些不同的输入值，但仍然希望 mat-autocomplete 附加到该输入。
因为我也在按照外部操作通过代码更改它。
如果您提供相同的堆栈闪电战，那就太好了。
假设您的displayFn 是显示某个对象的某个属性，您是否确定使用setValue() 设置整个对象对象而不仅仅是显示值？当您使用 [displayWith] 将输入与自动完成结合时，输入应该包含整个对象小例子：stackblitz.com/edit/angular-sjktt2
成功了！谢谢大佬，干得好！

标签： angular autocomplete angular-material angular-reactive-forms setvalue

【解决方案1】：

displayFn 接受输入以不同方式显示它（通常是输入中对象的属性），但它接受整个对象！您应该确保您使用setValue() 来设置一个对象，而不仅仅是您想要显示的值。

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

Little example

【讨论】：