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

问题描述

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

这是我的 html:

<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="让过滤类别的类别| async" [value]="category.name">{{ 分类名称 }}</md-option></md-自动完成></md-form-field>

这是我的 TypeScript 代码:

constructor(private placeService: PlaceService, private categoryService: CategoryService) {this.categoryCtrl = new FormControl();this.filteredCategories = this.categoryCtrl.valueChanges.从...开始('').map(category => category ? this.filterCategories(category) : this.categories.slice());}过滤类别(名称:字符串){返回 this.categories.filter(category => category.name.toLowerCase().indexOf(name.toLowerCase()) === 0);}选择类别(类别:任何){const index = this.selectedCategories.indexOf(category.option.value);如果(索引=== -1){this.selectedCategories.push(category.option.value)}}

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

谢谢.

解决方案

我想你已经很接近了，看起来唯一缺少的部分是重置 selectCategory 中的表单控件值.这是如何我们在自己的应用程序中完成了它，但实际上是同一件事:

/** 对自动完成触发器的引用.*/@ViewChild(MdAutocompleteTrigger)私人触发器:MdAutocompleteTrigger；/** 输入的表单控件.*/searchControl = new FormControl('');ngAfterViewInit() {//清除输入并在做出选择时发出this.trigger.autocomplete.optionSelected.map(event => event.option).订阅(选项=> {//这可能需要也可能不需要，这取决于您的目的option.deselect();//发出选择(这样父组件可以添加芯片)this.selection.emit(option.value);//重置输入值this.searchControl.setValue('');});}

每当您选择一个值时，所选文本都会有一个简短的闪烁".为了避免这种情况，您可以使用 displayWith 属性将选定的值显示为空:

...</md-自动完成>/** 显示选定自动完成值的函数.*/displayNull(值){返回空；}

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.

This is my 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.

Thanks.

解决方案

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

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屋！