PrimeNG 自动完成下拉切换无法按预期工作

Question

我正在使用 primeNG 自动完成下拉菜单。我遵循了文档中的所有内容。他们的切换似乎工作正常，但不是我的。对我来说，第一次单击下拉按钮时，它会显示建议面板，但当我再次单击时不会隐藏它。这是当我没有添加 onDropdDownClick 事件时，因为它在文档中。

app.component.html（没有 onDropdDownClick 事件）

     <p-autoComplete [(ngModel)]="RecordName" [suggestions]="filteredRecords" [dropdown]="true" [minLength]="0" [appendTo]="body"
            (completeMethod)="filterRecord($event)" [immutable]="false"
            forceSelection="true" placeholder="Enter record name..." autoHighlight="35" tabindex="0"></p-autoComplete>

app.component.ts

 filterRecord(event:any) {

    this.filteredRecords= [];

    for (let i = 0; i < this.recordsList.length; i++) {
        let record= this.recordsList[i];

        if (record.toLowerCase().indexOf(event.query.toLowerCase()) >= 0) {
        this.filteredRecords.push(record);
         }
    }

}

}

但是，当我添加 Ondropdownclick 事件时，切换工作正常，但只有一次。第一次单击它会显示建议下拉菜单并在第二次单击时将其隐藏，但第三次单击它以再次显示建议数据不显示。下面是这个的代码：

app.component.html

      <p-autoComplete [(ngModel)]="RecordName" [suggestions]="filteredRecords" [dropdown]="true" [minLength]="0" [appendTo]="body"
            (completeMethod)="filterRecord($event)" (onDropdownClick)="onDropDownClick($event)" [immutable]="false"
            forceSelection="true" placeholder="Enter record name..." autoHighlight="35" tabindex="0"></p-autoComplete>

app.component.ts

    filterRecord(event:any) {

    this.filteredRecords= [];

    for (let i = 0; i < this.recordsList.length; i++) {
        let record= this.recordsList[i];

        if (record.toLowerCase().indexOf(event.query.toLowerCase()) >= 0) {
        this.filteredRecords.push(record);
         }
    }

}

onDropDownClick(event: any) {

    this.filteredRecords= this.recordsList;

    event.originalEvent.preventDefault();
    event.originalEvent.stopPropagation();

    if (this.autoCompleteComponent.overlayVisible) {
        this.autoCompleteComponent.hide();
     } else {
        this.autoCompleteComponent.show();
     }

}

对于 onDropDownClick 事件，我还尝试了以下方法：

   onDropDownClick(event: any) {

this.filteredRecords=[]
this.filteredRecords= this.recordsList;

event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();

if (this.autoCompleteComponent.overlayVisible) {
    this.autoCompleteComponent.hide();
 } else {
    this.autoCompleteComponent.show();
 }

还有：

     onDropDownClick(event: any) {

          this.filteredRecords=[]

         setTimeout(() => {
        this.filteredRecords= this.recordsList;
            }, 100)

           event.originalEvent.preventDefault();
           event.originalEvent.stopPropagation();

          if (this.autoCompleteComponent.overlayVisible) {
               this.autoCompleteComponent.hide();
                 } else {
             this.autoCompleteComponent.show();
           }

也不行，第二个完全停止显示建议。

this.recordsList也是从服务中获取数据的，调试的时候发现recordsList一直都有数据，所以好像没有问题。

任何帮助将不胜感激。谢谢！

Answer 1

我知道已经很晚了，但是在其余的达到这一点之后，这对我有用：

onDropDownClick(event: any) {
    event.originalEvent.preventDefault();
    event.originalEvent.stopPropagation();

    if (this.autoCompleteObject.panelVisible) {
        setTimeout(() => {
            this.autoCompleteObject.hide();
        }, 100)
     } else {
        setTimeout(() => {
            this.autoCompleteObject.show();
        }, 100)
     } 
}

Answer 2

我遇到了类似的问题，我发现问题出在 completeMethod 处理程序中。您应该只为 suggestion 变量赋值一次，因为对该变量的更改将启动更改检测过程。

在此示例中，方法 filterRecord 在循环之前和循环中为变量 this.filterRecords 赋值：

 filterRecord(event:any) {

    this.filteredRecords=[];
    for (let i = 0; i < this.recordsList.length; i++) {
       let record= this.recordsList[i];

       if (record.toLowerCase().indexOf(event.query.toLowerCase()) >= 0) {
          this.filteredRecords.push(record);
        }
    }
  }

AutoComplete 控件在变量 this.filteredRecords 的值更改后立即从内部方法 handleSuggestionChange 开始 - 这是在第一次赋值 this 之后.filteredRecords=[];。此时，建议列表为空，并且不显示叠加层。

为了纠正这个问题，应该提前准备好数组，然后分配给一个变量。在此示例中，可以使用临时变量：

 filterRecord(event:any) {

    const tempFilteredRecords=[];
    for (let i = 0; i < this.recordsList.length; i++) {
       let record= this.recordsList[i];

       if (record.toLowerCase().indexOf(event.query.toLowerCase()) >= 0) {
          tempFilteredRecords.push(record);
        }
    }
    this.filteredRecords = tempFilteredRecords; 
  }