0

节点版本：8.12.0 角度版本：7.3.4 PrimeNG 版本：7.0.0

我正在使用 PrimeNG 的自动完成组件的下拉功能。它仅在第一次加载下拉列表后没有任何反应，这是自动完成功能功能的问题我的代码如下所示：

<p-autoComplete [(ngModel)]="selectedCompany"  styleClass="smlldropdwn" [suggestions]="companySuggestions" (completeMethod)="searchCompanies($event)" field="Name" 
                                       (onSelect)="getTagsList()" minLength ="0" [dropdown]="true" (onDropdownClick)="dropCompanies($event)" [size]="20"  spellcheck="false"> 
                                           <ng-template let-selectedCompany pTemplate="item">
                                               <div>
                                                   <div style=" text-transform: capitalize;">{{selectedCompany.Name}}</div>
                                               </div>
                                           </ng-template>
                                       </p-autoComplete>



public ManagementCompanies = [];
  public companySuggestions = [];
  searchCompanies(event) {
    if(event.originalEvent.type != "click")
    {
      if(event.query == "" || event.query == null){
          setTimeout(() => {
           this.companySuggestions = this.ManagementCompanies;
        }, 100);
      }else{
       var suggestions= [];
        this.companySuggestions = [];
        for (var i=0; i < this.ManagementCompanies.length; i++) {
          if (this.ManagementCompanies[i].Name.toLowerCase().indexOf(event.query.toLowerCase()) !== -1){
              suggestions.push(this.ManagementCompanies[i]);
          }
      }    
      this.companySuggestions = suggestions;

      }
    }     
  }

  dropCompanies(event) {
    if(event.originalEvent.type == "click")
    {
      var suggestions= [];
      var companySuggestions = [];
      suggestions = this.ManagementCompanies;
     setTimeout(() => {
        this.companySuggestions = suggestions;
      }, 100);
    }
  }

我的 app.module.ts 看起来像：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import { RouterModule, Routes} from '@angular/router';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // used for session timeout
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // used for dropdowns

import { AppComponent } from './app.component';
import { WebloginComponent } from './components/weblogin/weblogin.component';
import { MlandingpageComponent } from './components/mlandingpage/mlandingpage.component';

import { AuthGuard } from './guards/auth.guard';

import { AuthService } from './services/auth.service';
import { UseraccessdataService } from './services/useraccessdata.service';

import {DialogModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng/primeng';
import {AutoCompleteModule} from 'primeng/autocomplete';

const appRoutes: Routes = [
  {path:'',component: WebloginComponent},
  {path:'weblogin',component: WebloginComponent},
  {path:'landingpage',component: MlandingpageComponent},
  {path:'**',component: WebloginComponent}
]
@NgModule({
  declarations: [
    AppComponent,
    WebloginComponent,
    MlandingpageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes), //, {useHash: true}
    CalendarModule,
    DialogModule,
    AutoCompleteModule,
    NgIdleKeepaliveModule.forRoot()
  ],
  providers: [AuthService,UseraccessdataService,AuthGuard],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }
4

1 回答 1

0

不知道代码的问题在哪里。我刚刚尝试实现 primeNG 自动完成组件并且它可以工作。检查stackblitz链接

于 2019-08-12T16:05:27.397 回答