这里在这个斯塔克闪电战 https://stackblitz.com/edit/angular-rppvg8-jsvfqa?file=app%2Fasync-complete%2Fasync-complete.component.html我有一个带有异步数据的 mat-autocomplete 。
When (optionSelected)触发（当我单击一个选项时）我希望该字段完全重置，就像它刚刚渲染/初始化一样。
目前该解决方案有两个问题!
- 清除后我没有得到任何自我暗示。我想再次获得完整的自我暗示。
==> 我确实必须再次模糊并聚焦或开始打字。
- when I DON'T键入并仅blur and refocus我还有
mat-option.mat-selected附加到面板的类，因为重置只影响输入值。我用以下内容强调了这一点background-color: red;.
您需要将重置功能设置为如下所示
resetAutoInput(optVal, trigger: MatAutocompleteTrigger, auto: MatAutoComplete) {
setTimeout(_ => {
auto.options.forEach((item) => {
item.deselect()
});
this.myControl.reset('');
trigger.openPanel();
}, 100);
}
在你的 HTML 代码中将是
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" #trigger="matAutocompleteTrigger" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="resetAutoInput($event.option.value, trigger, auto);">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
