清除时重新打开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 Example（2018年9月更新）