Angular 14中PrimeNG Autocomplete搜索结果滞后一字符问题求助

问题描述 #

在Angular 14中使用PrimeNG的Autocomplete组件，将搜索结果展示在自定义div中时遇到滞后问题：输入“John”时，界面仅显示对应“Joh”的结果。日志显示完整的4个字符已传递到服务端，且服务端返回了正确结果，但界面始终展示上一次的返回结果。

相关代码 #

HTML代码 #

<p-autoComplete [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" [delay]="100"
            [(ngModel)]="value" data_eusw_control="quickTagSearch"
            [suggestions]="quickTagsDetailsService.quickTagsFilteredList" field="displayName" [minLength]="1"
            (completeMethod)="searchForTags($event)" scrollHeight="300px" [multiple]="false"
            (onSelect)="tagsSelected($event)" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"
            [showClear]="true" data_eusw_control="quickTagSelect_dropDownSelect" [appendTo]="'autocompleteContainer'">           
</p-autoComplete>

<div id="autocompleteContainer">
    <ng-template pTemplate="item" ngFor let-quicktag [ngForOf]="quickTagsDetailsService.quickTagsFilteredList"
    let-index="index">
      <div class="p-2 mt-2 font-bold rounded-lg card body border-1" (click)="quicktagSelected(quicktag,index)"
        [attr.data_eusw_control]="'quicktag_'+ index" style="overflow: hidden;">
        <div class="w-full text-sm text-[#ff6c22] font-arial mb-2 ">
          {{ quicktag.tagId }}
        </div>
        <div class="left-0 flex flex-row" style="display: block!important;">
          <div class="px-1 py-1 mb-2 startText" style="float: left; margin-right: 5px;">
            ProjectId:
            <span style="color: #2795bf; font-size: x-small">{{
              quicktag.projectId
              }}</span>
          </div>
          <div *ngIf="configService.config?.businessType === 'legal'" class="px-1 py-1 mb-2 startText"
            style="float: left; margin-right: 5px;">
            PhaseCode:
            <span style="color: #2795bf; font-size: x-small">{{
              quicktag.phaseCode
              }}</span>
          </div>
          <div *ngIf="configService.config?.businessType !== 'legal'" class="px-1 py-1 mb-2 startText"
            style="float: left; margin-right: 5px;">
            Activity:
            <span style="color: #2795bf; font-size: x-small">{{
              quicktag.activity
              }}</span>
          </div>
         
        </div>        
       </div>
    </ng-template>
  </div>

组件代码 #

searchForTags(event): void {
    console.log('event.query : ' + event.query);
    let filtered: QuickTags[] = [];
    if (!event.query) {
      this.quickTagsDetailsService.quickTagsFilteredList = filtered;
    }
    else {
      this.quickTagsDetailsService.quickTagsFilteredList = this.quickTagsDetailsService.getFilteredQuickTags(event.query).slice(0,3);      
    }
}

服务层方法 #

public getFilteredQuickTags(query:string): QuickTags[] {
    this.quickTasksService
        .getQuickTagsByUser(this.userService.profile?.userPrincipalName)
        .subscribe((data) => {
            let filtered: QuickTags[] = [];
            let json = JSON.stringify(data);
            let jsonObject = JSON.parse(json);
            let jsonData = JSON.parse(jsonObject.data);
            if (jsonData) {
                jsonData.forEach((element) => {
                    if (element.tagId?.toLowerCase().includes(query.toLowerCase()) ||
                        element.projectId?.toLowerCase().includes(query.toLowerCase()) ||
                        element.activity?.toLowerCase().includes(query.toLowerCase()) ||
                        element.category?.toLowerCase().includes(query.toLowerCase())) {
                        let quickTag = new QuickTags(element);            
                        filtered.push(quickTag);
                    }
                });
            }
            this.filteredQuickTags = filtered;
        });
    
        return this.filteredQuickTags; 
}

问题原因 #

核心是异步操作的时序错误：

• getFilteredQuickTags方法中，HTTP请求是异步执行的，但你直接返回了this.filteredQuickTags，此时请求还未完成，返回的是上一次请求的旧数据。
• 当HTTP请求完成后更新this.filteredQuickTags时，组件已经完成了赋值操作，Angular的变更检测不会自动同步新数据，导致界面展示的始终是上一次的结果。

解决方案 #

方案1：改用Observable处理异步数据流（推荐） #

修改服务层方法返回Observable，让组件订阅异步结果，确保数据更新后同步到界面：

服务层代码修改

import { Observable, map } from 'rxjs';

public getFilteredQuickTags(query: string): Observable<QuickTags[]> {
  return this.quickTasksService.getQuickTagsByUser(this.userService.profile?.userPrincipalName).pipe(
    map(data => {
      let filtered: QuickTags[] = [];
      // 优化：避免重复序列化/解析，若data已是JSON对象可直接使用
      const jsonObject = JSON.parse(JSON.stringify(data));
      const jsonData = JSON.parse(jsonObject.data);
      
      if (jsonData) {
        const lowerQuery = query.toLowerCase();
        jsonData.forEach((element) => {
          if (element.tagId?.toLowerCase().includes(lowerQuery) ||
              element.projectId?.toLowerCase().includes(lowerQuery) ||
              element.activity?.toLowerCase().includes(lowerQuery) ||
              element.category?.toLowerCase().includes(lowerQuery)) {
            filtered.push(new QuickTags(element));
          }
        });
      }
      this.filteredQuickTags = filtered;
      return filtered;
    })
  );
}

组件代码修改

searchForTags(event): void {
  console.log('event.query : ' + event.query);
  if (!event.query) {
    this.quickTagsDetailsService.quickTagsFilteredList = [];
    return;
  }
  
  this.quickTagsDetailsService.getFilteredQuickTags(event.query).subscribe(filtered => {
    this.quickTagsDetailsService.quickTagsFilteredList = filtered.slice(0, 3);
  });
}

方案2：手动触发变更检测（快速修复） #

如果不想调整异步逻辑，可在数据更新后手动触发Angular变更检测，强制界面更新：

服务层代码修改（添加回调）

public getFilteredQuickTags(query: string, callback: (result: QuickTags[]) => void): void {
  this.quickTasksService.getQuickTagsByUser(this.userService.profile?.userPrincipalName).subscribe((data) => {
    let filtered: QuickTags[] = [];
    const jsonObject = JSON.parse(JSON.stringify(data));
    const jsonData = JSON.parse(jsonObject.data);
    
    if (jsonData) {
      const lowerQuery = query.toLowerCase();
      jsonData.forEach((element) => {
        if (element.tagId?.toLowerCase().includes(lowerQuery) ||
            element.projectId?.toLowerCase().includes(lowerQuery) ||
            element.activity?.toLowerCase().includes(lowerQuery) ||
            element.category?.toLowerCase().includes(lowerQuery)) {
          filtered.push(new QuickTags(element));
        }
      });
    }
    this.filteredQuickTags = filtered;
    callback(filtered);
  });
}

组件代码修改（注入变更检测器）

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

searchForTags(event): void {
  console.log('event.query : ' + event.query);
  if (!event.query) {
    this.quickTagsDetailsService.quickTagsFilteredList = [];
    return;
  }
  
  this.quickTagsDetailsService.getFilteredQuickTags(event.query, (filtered) => {
    this.quickTagsDetailsService.quickTagsFilteredList = filtered.slice(0, 3);
    this.cdr.markForCheck(); // 手动触发变更检测
  });
}

额外优化建议 #

1. 避免重复JSON操作：如果this.quickTasksService.getQuickTagsByUser返回的已是JSON对象，可直接使用，无需JSON.stringify再JSON.parse。
2. 缓存请求结果：对相同的查询关键词缓存结果，减少重复HTTP请求。
3. 保留防抖配置：你已设置的delay="100"可以有效减少频繁输入时的请求次数，建议保留。

内容的提问来源于stack exchange，提问作者user1063760