angular - 自定义实体的 ngbTypeahead

Question

如何将自定义实体与 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

Answer 1

这是可行的解决方案，导致 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"
/>