jHipster 项目中的自动完成表单

Question

我正在尝试使用 PrimeNg 在 jHipster 项目的表单中实现自动完成，并遵循本手册 https://antoniogoncalves.org/2018/11/08/jhipster-angular-primeng-and-autocomplete/。 git 中的示例效果很好。

purchaseAgreementDetailsUpdateComponent.ts

export class PurchaseAgreementDetailsUpdateComponent implements OnInit {
   purchaseAgreementDetails: IPurchaseAgreementDetails;
   nomenclaturas: INomenclatura[];
   selectedNom : INomenclatura;
   suggestedNoms : INomenclatura[];

   constructor(
    protected nomenclaturaService: NomenclaturaService,
    protected activatedRoute: ActivatedRoute
) {}

ngOnInit() {
    this.nomenclaturaService.query().subscribe(
        (res: HttpResponse<INomenclatura[]>) => {
            this.nomenclaturas = res.body;
        },
        (res: HttpErrorResponse) => this.onError(res.message)
    );
}
searchLanguages($event) {
    this.languageService.query({'name.contains': $event.query}).subscribe(
        (res: HttpResponse<ILanguage[]>) => {
            this.suggestedLanguages = res.body;
        },
        (res: HttpErrorResponse) => this.onError(res.message)
    );
}

captureSelectedLanguage($event) {
    this.selectedLanguage = $event;
    this.contact.languageId = $event.id;
    this.contact.languageName = $event.name;
}

purchaseAgreementDetailsUpdateComponent.html

  <p-autoComplete id="field_language" 
  name="language"
  [(ngModel)]="selectedLanguage" field="name"
  [suggestions]="suggestedLanguages"                                            
  (completeMethod)="searchLanguages($event)"                                     
  (onSelect)="captureSelectedLanguage($event)"
  required>
 </p-autoComplete>

但是当我输入时没有任何建议，尽管我看到 http-reqs 和根据输入的值过滤实体的响应

Answer 1

通过添加解决了问题：

   import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

到app.module.ts

jHipster 项目中的自动完成表单

Autocomplete form in jHipster project

autocomplete

typescript

jhipster

angular