typescript 选择后清除角材料自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46268259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear Angular Material autocomplete after selection
提问by Tobi
The problem I'm having is the following: the behaviour I need is, when an option is selected from the autocomplete input, it should add a chip to the Angular Material Chips component (which it does) and it should also clear the autocomplete input, so I can then select another option.
我遇到的问题如下：我需要的行为是，当从自动完成输入中选择一个选项时，它应该向 Angular Material Chips 组件添加一个芯片（它确实如此）并且它还应该清除自动完成输入，所以我可以选择另一个选项。
This is my html:
这是我的 html：
<div class="col-md-6">
<md-form-field>
<input type="text" placeholder="Categoría" aria-label="Categoría" mdInput [mdAutocomplete]="auto" [formControl]="categoryCtrl">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="selectCategory($event)">
<md-option *ngFor="let category of filteredCategories | async" [value]="category.name">
{{ category.name }}
</md-option>
</md-autocomplete>
</md-form-field>
</div>
This is my TypeScript code:
这是我的打字稿代码：
constructor(private placeService: PlaceService, private categoryService: CategoryService) {
this.categoryCtrl = new FormControl();
this.filteredCategories = this.categoryCtrl.valueChanges
.startWith('')
.map(category => category ? this.filterCategories(category) : this.categories.slice());
}
filterCategories(name: string) {
return this.categories.filter(category => category.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
selectCategory(category: any) {
const index = this.selectedCategories.indexOf(category.option.value);
if (index === -1) {
this.selectedCategories.push(category.option.value)
}
}
I've checked the Angular Material documentation and I haven't found a method to do this.
我已经检查了 Angular Material 文档，但没有找到执行此操作的方法。
Thanks.
谢谢。
回答by Will Howell
I think you're close, it looks like the only missing piece is resetting the form control value in selectCategory. This is how
we accomplished it in our own app, but it's effectively the same thing:
我认为你很接近，看起来唯一缺少的部分是重置selectCategory. 这是我们在自己的应用程序中完成它的方式，但实际上是同一件事：
/** Reference to the autocomplete trigger. */
@ViewChild(MdAutocompleteTrigger)
private trigger: MdAutocompleteTrigger;
/** Form control for the input. */
searchControl = new FormControl('');
ngAfterViewInit() {
// Clear the input and emit when a selection is made
this.trigger.autocomplete.optionSelected
.map(event => event.option)
.subscribe(option => {
// This may or may not be needed, depending on your purposes
option.deselect();
// Emit the selection (so parent component can add chip)
this.selection.emit(option.value);
// Reset the value of the input
this.searchControl.setValue('');
});
}
Whenever you select a value, there will be a brief "flash" of the selected text. To avoid this,
you can use the displayWithproperty to just display selected values as empty:
每当您选择一个值时，所选文本都会有一个简短的“闪烁”。为避免这种情况，您可以使用该displayWith属性将选定的值显示为空：
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull">
...
</md-autocomplete>
/** Display function for selected autocomplete values. */
displayNull(value) {
return null;
}
回答by Friedrich Roell
Here my approach
这是我的方法
in template
在模板中
...
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull" (optionSelected)="selectHandler($event)">
...
in component.ts
在component.ts
public selectHandler(event : MdAutocompleteSelectedEvent) : void
{
event.option.deselect()
this.doStuffWith(event.option.value)
}
public displayNull()
{
return null
}
回答by Reed
Came across this solution, but I didn't like the displayNullfix.
遇到了这个解决方案，但我不喜欢这个displayNull修复。
My solution looks similar to this:
我的解决方案看起来类似于：
component.html:
组件.html：
<input matInput [matAutocomplete]="auto" (input)="filter($event.target.value)" #autoInput>
<mat-autocomplete #auto [displayWith]="displayKey" (optionSelected)="emit($event, autoInput)">
// ...
</mat-autocomplete>
component.ts:
组件.ts：
@Output() optionSelected = new EventEmitter<MatAutocompleteSelectedEvent>();
emit(event: MatAutocompleteSelectedEvent, ele: HTMLInputElement) {
ele.value = '';
ele.blur();
this.filter('');
this.optionSelected.emit(event);
}
