如何解决ngbTypeahead用于自定义实体
如何将自定义实体与ngbTypeahead集成在一起?
假设我有以下服务:
type EntityArrayResponseType = HttpResponse<IMicroservice[]>;
@Injectable({ providedIn: 'root' })
export class MicroserviceService {
constructor(protected http: HttpClient) {}
query(req?: any): Observable<EntityArrayResponseType> {
const options = createRequestOption(req);
return this.http.get<IMicroservice[]>(this.resourceUrl,{ params: options,observe: 'response' });
}
这是我的组成部分:
<input class="form-control" type="text" placeholder="Search" aria-label="Search"
[ngbTypeahead]="search"
[resultFormatter]="microserviceFormatter"
[inputFormatter]="microserviceInputFormatter"
/>
事件处理程序:
@Component({
selector: 'jhi-microservice-search',templateUrl: './microservice-search.component.html',styleUrls: ['./microservice-search.component.scss'],})
export class MicroserviceSearchComponent implements OnInit {
constructor(protected microserviceService: MicroserviceService) {}
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),distinctUntilChanged(),switchMap(searchText => (searchText.length < 2 ? [] : this.microserviceService.query()))
);
microserviceFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
microserviceInputFormatter = (result: HttpResponse<IMicroservice>) => result?.body?.name;
ngOnInit(): void {}
}
我曾尝试同时使用 this.microserviceService.query()。map()或 this.microserviceService.query()。do() ,但都给我错误,并且没有导入建议。
此外搜索不正确:
ERROR in src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-search/microservice-search.component.html:2:8 - error TS2322: Type '(text$: Observable<string>) => Observable<EntityArrayResponseType>' is not as
signable to type '(text: Observable<string>) => Observable<readonly any[]>'.
Type 'Observable<EntityArrayResponseType>' is not assignable to type 'Observable<readonly any[]>'.
Type 'HttpResponse<IMicroservice[]>' is missing the following properties from type 'readonly any[]': length,concat,join,slice,and 16 more.
2 [ngbTypeahead]="search"
~~~~~~~~~~~~~~~~~~~~~~~
请告知。您可以在这里找到完整的代码示例:https://github.com/tillias/microservice-catalog/commit/4a5f39b2fdd5afbb098ead980e7ed7c61f63287f
解决方法
这是可行的解决方案,导致在Angular 9和最新的TS中更改了语法:
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),distinctUntilChanged(),switchMap(searchText => (searchText.length < 2 ? [] :
this.loadData(searchText)
)
)
);
loadData(searchText: string): Observable<IMicroservice[]> {
return this.microserviceService.query().pipe(
map(response => response.body!.filter(m => m.name!.toLowerCase().includes(searchText.toLowerCase())) || [{}])
);
}
formatter = (result: IMicroservice) => result.name || "";
inputFormatter = (result: IMicroservice) => result.name || "";
组件本身:
<input class="form-control" type="text" placeholder="Search" aria-label="Search"
[ngbTypeahead]="search"
[resultFormatter]="formatter"
[inputFormatter]="inputFormatter"
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。