angular - 清除时重新打开 Angular Material 自动完成功能

Question

我有一个带有自动完成功能的输入 instructorControl = new FormControl();。自动完成订阅 this.instructorControl.valueChanges。When a suggestion from the autocomplete is selected or the add button is clicked, the current input value is pushed to an array and the input cleared with this.instructorControl.patchValue('');.

选择自动完成选项后，自动完成选项菜单不会再次打开。为此，您要么必须输入内容，要么重新调整输入的焦点。

如何在选择建议后重新打开自动完成功能？

查看此 stackblitz . (9 月 18 日更新)

app.component.html

  <button md-button (click)="addInstructor()">add</button>
  <md-input-container fxFlex>
    <input mdInput name="instructor" placeholder="instructor" (keydown.enter)="addInstructor()" [mdAutocomplete]="instructorsAuto" [formControl]="instructorControl">
  </md-input-container>


  <md-autocomplete #instructorsAuto="mdAutocomplete">
    <md-option *ngFor="let instructor of filteredInstructors | async" [value]="instructor" (click)="addInstructor()">
      {{ instructor }}
    </md-option>
  </md-autocomplete>

  {{instructors | json}}

应用程序组件.ts

  instructors: string[] = [];
  instructorControl = new FormControl();
  filteredInstructors: Observable<string[]>;
  allInstructors = ['Max', 'Tirrell'];;
  instructorsAuto;

  ngOnInit() {
    this.filteredInstructors = this.instructorControl.valueChanges
      .startWith('')
      .map(value => this.filterInstructors(value));
  }

  addInstructor() {
    const instructor: string = this.instructorControl.value;
    if (instructor) {
      this.instructors.push(instructor);
      this.instructorControl.patchValue('');
    }
  }

  private filterInstructors(value: string = ''): string[] {
    return this.allInstructors.filter(instructor => new RegExp(`${value}`, 'gi').test(instructor));

Answer 1

我的建议是使用 @ViewChild 装饰器来获取 MdAutocompleteTrigger 实例，然后在其上触发 openPanel() 方法。

为了做到这一点:

1) 将模板引用变量添加到 input[autocomplete] 元素:

<input #trigger ...
       [mdAutocomplete]="instructorsAuto"
       [formControl]="instructorControl">

2) 声明由 @ViewChild 属性修饰。

import { MdAutocompleteTrigger } from '@angular/material'
...
@ViewChild('trigger', { read: MdAutocompleteTrigger }) trigger: MdAutocompleteTrigger;
                        ^^^^^^^^^^^^^^^^^^^^^^^^^
         make sure you're getting the right instance from template reference

3) 在您的 addInstructor 方法中使用它:

this.trigger.openPanel();

Stackblitz Example (2018 年 9 月更新)