ngBootstrapでhttpをAngular 4に入力してください。

Question

ngBootstrapを使用してオートコンプリート用のAngular 4 Typeaheadを使いたいと思います。リモートデータの取得に使用するサンプルは、httpではなくJsonpを使用しています。この例では、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は、検索文字列を取ります。私のモーダル成分（filters.component.ts）ファイルで

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); 
} 

、私のサービスは、オブジェクトの配列を返すことを知って、私は、入力ならびに結果オブジェクトの両方を処理するフォーマッタメソッドを作成しなければなりませんでした構造。

私は、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内にそのロジックを配置しようとするとエラーになります。