Javascript 按enter键后清除p-自动完成预充

使用Priming auto complete，我有以下html

<p-autoComplete
    id="autocomplete"
    [(ngModel)]="termToSearch"
    [minLength]=1
    [suggestions]="suggestedData"
    (completeMethod)="search($event)"
    placeholder="Search by name..."
    (onSelect)="goToDetailPage($event)"
    (onClear)="clearInput()"
    (keydown.enter)="onSearchSubmit($event)"
    [forceSelection]=false>
 </p-autocomplete>

在大多数情况下，这是可行的，但同时它并不可行。它会清除建议列表，但不会隐藏整个建议下拉列表，因此UI的最终外观如下所示：

clearInput() {
    this.termToSearch = null;
  }

  clearSuggestions() {
    this.suggestedData = null;
  }

 onSearchSubmit(event) {
    this.clearSuggestions();
    this.clearInput();
    // before we do a general search for whatever was entered, hide the suggestions dropdown
    this.router.navigate(["/search/results"], {queryParams: { q: event.target.value }});
}

无论何时需要清除建议列表，请使用此

this.suggestedData=[]

要手动关闭建议下拉列表，请使用启动自动完成组件.hide（）

AutoComplete.hide（）

HTML实现

<p-autoComplete
    id="autocomplete"
    #autocomplete
    [(ngModel)]="termToSearch"
    [minLength]=1
    [suggestions]="suggestedData"
    (completeMethod)="search($event)"
    placeholder="Search by name..."
    (onSelect)="goToDetailPage($event)"
    (onClear)="clearInput()"
    (keydown.enter)="autocomplete.hide();onSearchSubmit($event)"
    [forceSelection]=false>
 </p-autocomplete>

在其TS中添加

从'priming/AutoComplete'导入{AutoComplete}

@ViewChild（'autocomplete'）autocomplete:autocomplete
这似乎对我不起作用。我有一个构建错误。属性“自动完成”不存在…请将“自动完成”作为ViewChild添加到其TS文件中。更新了相同的答案。TypeError:无法读取未定义的属性“hide”。不应检查此示例StackBlitz