选择后清除“角材料"自动完成 [英] Clear Angular Material autocomplete after selection

问题描述

我遇到的问题如下:我需要的行为是，当从自动完成输入中选择一个选项时，它应该向Angular Material Chips组件中添加一个芯片(确实如此)并且还应该清除自动完成输入，因此我可以选择另一个选项.

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.

这是我的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>

这是我的TypeScript代码:

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)
    }
}

我已经检查了Angular Material文档，但还没有找到一种方法来做到这一点.

I've checked the Angular Material documentation and I haven't found a method to do this.

谢谢.

推荐答案

我想你很亲密，似乎唯一缺少的部分是重置selectCategory中的表单控件值.这就是 我们是在自己的应用中完成的，但实际上是同一件事:

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:

/** 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('');
    });
}

无论何时选择一个值，所选文本都会出现短暂的闪烁".为了避免这种情况， 您可以使用displayWith属性将所选值显示为空:

Whenever you select a value, there will be a brief "flash" of the selected text. To avoid this, you can use the displayWith property to just display selected values as empty:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull">
  ...
</md-autocomplete>

/** Display function for selected autocomplete values. */
displayNull(value) {
  return null;
}

这篇关于选择后清除“角材料"自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！