Angular 自定义实体的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' });
  }

类型EntityArrayResponseType=HttpResponse；
@可注射（{providedIn:'root'}）
导出类微服务{
构造函数（受保护的http:HttpClient）{}
查询（请求？：任何）：可观察{
常量选项=createRequestOption（req）；
返回this.http.get（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 {}
}

@组件({
选择器：“jhi微服务搜索”，
templateUrl:'./microservice search.component.html'，
样式URL:['./microservice search.component.scss']，
})
导出类MicroserviceSearchComponent实现OnInit{
构造函数（受保护的微服务：微服务）{}
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（200），
distinctUntilChanged（），
switchMap（searchText=>（searchText.length<2？[]：this.microserviceService.query（））
);
microserviceFormatter=（结果：HttpResponse）=>结果？.body？.name；
microserviceInputFormatter=（结果：HttpResponse）=>结果？.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"
         ~~~~~~~~~~~~~~~~~~~~~~~

src/main/webapp/app/entities/microservice/microservice dashboard/microservice search/microservice search.component.html:2:8中出现错误-错误TS2322:Type'（text$：Observable）=>Observable'未显示为 可签名输入“（文本：可观察）=>可观察”。 类型“Observable”不可分配给类型“Observable”。 类型“HttpResponse”缺少类型“readonly any[]”中的以下属性：长度、连接、连接、切片等。 2[ngbTypeahead]=“搜索” ~~~~~~~~~~~~~~~~~~~~~~~

---

请提供建议。您可以在此处找到完整的代码示例：

这是有效的解决方案，因为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 || "";

search=（text$：Observable）=>
文本$.pipe(
去BounceTime（200），
distinctUntilChanged（），
开关映射（searchText=>（searchText.length<2？[]：
此.loadData（搜索文本）
)
)
);
loadData（searchText:string）：可观察{
返回此.microserviceService.query（）.pipe(
映射（response=>response.body！.filter（m=>m.name！.toLowerCase（）.includes（searchText.toLowerCase（））| |[{}]）
);
}
格式化程序=（结果：IMicroservice）=>result.name | |“”；
inputFormatter=（结果：IMicroservice）=>result.name | |“”；

组件本身：

<input class="form-control" type="text" placeholder="Search" aria-label="Search"
       [ngbTypeahead]="search"
       [resultFormatter]="formatter"
       [inputFormatter]="inputFormatter"
/>