清除时重新打开Angular Material自动完成

Question

我有instructorControl = new FormControl();一个自动完成输入.autocompelte订阅this.instructorControl.valueChanges.当选择自动完成的建议或单击添加按钮时,当前输入值将被推送到数组并且输入将被清除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}}

app.component.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示例(2018年9月更新)