angular - 将 http 与 ngBootstrap Typeahead 一起用于 Angular 4

Question

我想使用 ngBootstrap for Angular 4 Typeahead 来自动完成。他们用于远程数据检索的示例是使用 Jsonp 而不是 http。在该示例中，我一直在尝试查找更多信息以将 Jsonp 替换为 http。我对 Observables 还不太熟悉，所以我正在尝试学习它们并更好地理解它们。

我看过这个 example，但它看起来真的很简单，也许(？)为了简单起见省略了很多……？

有人能指出正确的方向吗，我正在尝试使用带有 ngBootstrap Typeahead 的 http 找到一些很好的例子。

编辑

    {
  "took": 15,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "failed": 0
  },
  "hits": {
    "total": 9,
    "max_score": 4.2456956,
    "hits": [
      {
        "_index": "query-index",
        "_type": "autocomplete",
        "_id": "AVxqBE-3t2o4jx2g0ntb",
        "_score": 4.2456956,
        "_source": {
          "suggestions": "bruce"
        }
      },
      {
        "_index": "query-index",
        "_type": "autocomplete",
        "_id": "AVxqBE-3t2o4jx2g0ntc",
        "_score": 3.064434,
        "_source": {
          "suggestions": "bruce wayne"
        }
      },
      {
        "_index": "query-index",
        "_type": "autocomplete",
        "_id": "AVxqBE-3t2o4jx2g0ntd",
        "_score": 3.064434,
        "_source": {
          "suggestions": "bruce willis"
        }
      },

编辑 2

export class AutocompleteComponent {
  model: any;
  searching = false;
  searchFailed = false;

  constructor(private autocompleteService: Elasticsearch) {}

  //formatMatches = (query: any) => query.hits.hits._source.suggestions || '';
  //formatMatches = (query: any) => query.hits.hits || '';
  formatMatches = (query: any) => <any>response.json().hits.hits || '';
  search = (text$: Observable<string>) =>
  //search = (text$: Observable<Suggestion[]>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      //.switchMap(term =>
      //Observable.fromPromise(this.autocompleteService.search(term)
      .switchMap(term =>
      this.autocompleteService.search(term)
      .do( () => this.searchFailed = false)
      .catch( () => {
        this.searchFailed = true;
        return Observable.of([]);
      }))
      .do( () => this.searching = false);
}

Answer 1

我想我知道一点如何解释它。但是，我正在构建一个处理过滤器的模式。下面是我的 httpService.getCarriers，它接受一个搜索字符串。

getCarriers(query: string): Observable<any> {
  return this._http.get(this._ripcord + '/carriers?search_string=' + query, this.options)
    .map((response: Response) => <any>response.json().data)
    .do(data => console.log(data))
    .catch(this.handleError);
}

在我的模式组件 (filters.component.ts) 文件中，知道我的服务返回一个对象数组，我必须创建一个 formatter 方法来处理输入和结果对象结构。

我想既然 ngbdTypeahead 接受一个 Observable，我会把这个词发送到我的 httpservice 并允许它返回一个 Observable 而不是尝试订阅它。

// filters.component.ts
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

import { HttpService } from '../../../shared/http.service';
import { Carrier } from '../../../definitions/carrier';

@Component({
  selector: 'afn-ngbd-modal-content',
  templateUrl: './modal/filters.modal.html',
  styleUrls: ['./modal/filters.modal.css']
})
export class NgbdModalContentComponent {

  filtersForm: FormGroup;
  carriers: Carrier[];

  constructor(public activeModal: NgbActiveModal, public httpService: HttpService, private fb: FormBuilder) {
    this.createForm();
  }

  carrier_search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .do((text) => console.log(text))
      .switchMap(term =>
        this.httpService.getCarriers(term)
      )
  ;

  formatter = (x: {attributes: {name: string}}) => x.attributes.name;

  createForm() {
    this.filtersForm = this.fb.group({
      name: ['', Validators.required],
    });
  }
}

@Component({
  selector: 'afn-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit {

  constructor(private modalService: NgbModal) { }

  open() {
    const modalRef = this.modalService.open(NgbdModalContentComponent);
  }
  ngOnInit() {
  }

}

这是我的模式的 HTML 模板:

// filters.modal.html
<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <!--<p>Hello, {{name}}!</p>-->
  <form [formGroup]="filtersForm" novalidate>
    <div class="form-group">
      <label class="center-block">Carrier:
        <input type="text" class="form-control" formControlName="name" [ngbTypeahead]="carrier_search" [inputFormatter]="formatter" [resultFormatter]="formatter">
      </label>
    </div>
  </form>

  <p>Form value: {{ filtersForm.value | json }}</p>
  <p>Form status: {{ filtersForm.status | json }}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

如果有任何具体问题，请告诉我。我有点四处乱逛，直到我开始工作。

不用说，即使 debounceTime 很棒，我仍然不想在用户输入至少 3 个字符之前执行请求。如果我尝试将该逻辑放在 switchMap 中，我会收到错误消息。