Question

我遇到的问题如下：我需要的行为是，当从自动完成输入中选择一个选项时，它应该将一个芯片添加到Angular Material Chips组件（它所做的），它应该还清除自动完成输入，然后我可以选择其他选项。

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

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文档，但我还没有找到一种方法来执行此操作。

感谢。

Answer 1

我认为您已经关闭，看起来唯一缺失的部分是重置new = Extra.objects.filter(user=request.user) if new: # call update() on your QuerySet new.update(timestamp=timezone.now()) else: Extra.objects.create(user=request.user, timestamp=timezone.now())中的表单控件值。这是怎么回事我们在自己的应用程序中完成了它，但它实际上是一样的：

selectCategory

每当你选择一个值时，会有一个简短的＆＃34; flash＆＃34;所选文字。要避免这种情况，您可以使用/** 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

Answer 2

这是我的方法

模板中的

...
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull" (optionSelected)="selectHandler($event)">
...

在component.ts

中

public selectHandler(event : MdAutocompleteSelectedEvent) : void
{
    event.option.deselect()
    this.doStuffWith(event.option.value)
}

public displayNull()
{
    return null
}

Answer 3

在该解决方案中也很不错，但我不喜欢displayNull修复程序。

我的解决方案与此类似：

component.html：

  <input matInput [matAutocomplete]="auto" (input)="filter($event.target.value)" #autoInput>
  <mat-autocomplete #auto [displayWith]="displayKey" (optionSelected)="emit($event, autoInput)">
  // ...
  </mat-autocomplete>

component.ts：

@Output() optionSelected = new EventEmitter<MatAutocompleteSelectedEvent>();

emit(event: MatAutocompleteSelectedEvent, ele: HTMLInputElement) {
  ele.value = '';
  ele.blur();
  this.filter('');
  this.optionSelected.emit(event);
}

选择后清除角度材料自动完成

3 个答案: