角度材料自动完成可防止 setValue 的反应性工作 [英] angular material autocomplete prevents reactive from setValue from working
问题描述
已通过 Jojofoulk 的评论解决.
Resolved with Jojofoulk's comment.
当使用angular-material的自动完成组件时，我正在尝试将 setValue 用于输入表单，但它的 [matAutocomplete] 属性阻止了 setValue 在输入中显示.>
检查反应控件显示值是正确的，删除 [matAutocomplete] 使其工作，但它只是没有出现.
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>
<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");
推荐答案
displayFn 接受输入以不同的方式显示它(通常是输入中对象的属性)，但它需要整个目的！您应该确保使用 setValue() 来设置对象，而不仅仅是要显示的值.
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.
当您使用 [displayWith] 将输入与 [matAutoComplete] 耦合时，输入应该包含整个对象，displayFn 会处理填写您的输入.
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.
这篇关于角度材料自动完成可防止 setValue 的反应性工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
