角材料自动完成功能可防止setValue的反应起作用 [英] angular material autocomplete prevents reactive from setValue from working

问题描述

解决了Jojofoulk的评论.

在使用角材料的自动完成组件时，我正在尝试在输入表单中使用 setValue ，但是其 [matAutocomplete] 属性阻止了 setValue 出现在输入中.

检查反应性控件显示该值正确，然后删​​除 [matAutocomplete] 使其起作用，但是它并没有显示出来.

 <代码>< mat-list-item role ="listitem" * ngFor =让curObj.skills的技能；索引为ind">< div>< mat-form-field><输入type ="text"占位符=选择技能" aria-label =数字" matInput [formControl] ="skill.control" [matAutocomplete] ="auto">< mat-autocomplete#auto ="matAutocomplete" [displayWith] ="displayFn"(optionSelected)="optSel($ event.option.value，skill)">< mat-option * ngFor ="skill.filteredOptions的选项|异步" [value] ="option">{{option.name}}</mat-option></mat-autocomplete></mat-form-field></div></mat-list-item> 

  skill.control.setValue(一些新值"); 

解决方案

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

当您使用 [displayWith] 将其与 [matAutoComplete] 耦合时，输入应包含整个对象，请小心 displayFn 填补您的输入.

小例子

Edit: Resolved with Jojofoulk's comment.

when using the autocomplete components of angular-material, I'm trying to use setValue to the input form, but its [matAutocomplete] attribute is preventing setValue from showing on the input.

Inspecting the reactive control reveals the value is right, and removing [matAutocomplete] makes it work, but with it it's just not showing up.

<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");

解决方案

The displayFn takes the input to display it differently (usually a property of an object in your input), but it takes the whole object! You should make sure you are using setValue() to set an object and not just the value you want to display.

The input should hold the whole object when you couple it with the [matAutoComplete] using [displayWith], the displayFn will take care of filling your input.

Little example

这篇关于角材料自动完成功能可防止setValue的反应起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！