Angular JHipster：通过使用带有observable的NgbTypeahead替换ComboBox来实现自动完成

我想将JHipster（6.8.0）中使用的组合框替换为一个“自动完成”字段，我在博客上找到了使用PrimeNG的方法，但我不想再添加一个新的小部件库

我意识到JHipster已经在使用“bootstrapwidgets”库（）用“ngbdatepicker”输入日期

此库提供了一个组件，该组件允许使用“Ngb typeahead”指令的“自动完成”功能。 我不是一个测角专家，所以要找到最好的方法对我来说并不容易。这就是说，要做的改动相对较小，而且最重要的是：它的作品

有以下几个方面：

JDL文件用于生成JHipster示例应用程序

entity Contact {
    firstName String required,
    lastName String required,
    email String
}

entity Language {
    alpha3b String required maxlength(3),
    alpha2 String required maxlength(2)
    name String required,
    flag32  String,
    flag128 String,
    activated Boolean
}

relationship ManyToOne {
    Contact{language(name) required} to Language
}

filter *

service all with serviceClass
paginate Contact with pagination
dto * with mapstruct

联系人更新.component.html

将现有控制替换为：

                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="jhcontact2App.contact.language" for="field_language">Language</label>
<!--                     <select class="form-control" id="field_language" name="language" formControlName="languageId"> -->
<!--                         <option *ngIf="!editForm.get('languageId')!.value" [ngValue]="null" selected></option> -->
<!--                         <option [ngValue]="languageOption.id" *ngFor="let languageOption of languages; trackBy: trackById">{{ languageOption.name }}</option> -->
<!--                     </select> -->

                    <input type="text" class="form-control" id="field_language" formControlName="language"
                           placeholder="{{ 'jhcontact2App.contact.language.placeholder' | translate }}"                         
                           (selectItem)="selectedItem($event)"
                           [ngbTypeahead]="search"
                           [inputFormatter]="formatter"
                           [resultFormatter]="formatter"
                           [editable]='false' />

                </div>
                <div *ngIf="editForm.get('language')!.invalid && (editForm.get('language')!.dirty || editForm.get('language')!.touched)">
                    <small class="form-text text-danger"
                           *ngIf="editForm.get('language')?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                    </small>
                </div>

private createFromForm（）：IContact{
//从窗体获取完整对象
const language:ILanguage=this.editForm.get（['language']）！.value；
返回{
…新联系人（），
id:this.editForm.get（['id']）！.value，
firstName:this.editForm.get（['firstName']）！.value，
lastName:this.editForm.get（['lastName']）！.value，
电子邮件：this.editForm.get（['email']）！.value，
//languageId:this.editForm.get（['languageId']）！.value
languageId:language.id
};
}

添加Ngb typeahead使用的新功能：

//添加格式化程序
格式化程序=（x:{name:string}）=>x.name；
//seach函数
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（300），
distinctUntilChanged（），
switchMap（term=>this.languageService.searchByName（term））
)
//当选者
选择编辑项（语言：i语言）：无效{
this.editForm.patchValue({
语言：language.name
});
}

语言.服务.ts

searchByName（术语：字符串）：任意{
如果（术语==''）{
归还（[]）；
}
const options=createRequestOption（{'name.contains'：term}）；
返回this.http.get（this.resourceUrl，{params:options}）；
}

最后一点并不能完全满足我的要求，因为我想重用语言.service.ts组件的“初始查询生成方法”，但该方法使用RXJS并返回一个“可观察的”，我不知道如何等待http请求结束后将结果传递给函数

初始查询生成方法

查询（请求？：任何）：可观察{
常量选项=createRequestOption（req）；
返回this.http.get（this.resourceUrl，{params:options，observe:'response'}）；
}

---

如果有人能帮我做这件事？

最后，我找到了一种重用Jhister生成的“query（）”方法的方法

像这样：

//搜索函数
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（300），
distinctUntilChanged（），
switchMap（term=>term.length<2？[]：this.languageService.query（{'name.contains'：term}）），
map（（res:HttpResponse）=>（res.body | |[]））
);

---

searchByName（）方法不再需要。

最后，我找到了一种重用Jhister生成的“query（）”方法的方法

像这样：

//搜索函数
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（300），
distinctUntilChanged（），
switchMap（term=>term.length<2？[]：this.languageService.query（{'name.contains'：term}）），
map（（res:HttpResponse）=>（res.body | |[]））
);

---

searchByName（）方法不再需要。

http.get（）返回一个可观察的，您将searchByName（）键入为“any”的事实不会改变这一点（读取）。我看不出searchByName（）和query（）之间有什么真正的区别，在这两种情况下都会返回一个可观察的对象，您必须对其调用subscribe（）来处理服务器返回的数据。感谢您的关注，Gael，我的分析是错误的。在searchByName（）情况下，该方法返回一个ILanguage的可观察对象，但在query（）情况下methode返回一个HttpResponse的Observable，我不能将其用作iterable。http.get（）返回一个Observable，您将searchByName（）键入为“any”的事实不会改变这一点（读取）。我看不出searchByName（）和query（）之间有什么真正的区别，在这两种情况下都会返回一个可观察的对象，您必须对其调用subscribe（）来处理服务器返回的数据。感谢您的关注，Gael，我的分析是错误的。在searchByName（）情况下，该方法返回一个ILanguage的可观察对象，但在query（）情况下methode返回一个HttpResponse的可观察值，我不能将其用作可观察值。