2016-08-31 9 views
1
export class RulesComponent { 
    items: Observable<Array<string>>; 
    term = new FormControl(); 

    constructor(private searchService: SearchService) {} 

    ngOnInit() { 
    this.items = this.term.valueChanges 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(term => this.searchService.search('rules', term)); 
    } 
} 

@Injectable() 
export class SearchService { 

    constructor(private jsonp: Jsonp) {} 

    search(name: string, term: string) { 
    var search = new URLSearchParams(); 
    search.set('search', term); 
    return this.jsonp 
       .get('http://127.0.0.1:8000' , { search }) 
       .map(this.extractData) 
       .json(); 
    } 
} 

term値が変更される前にsearch()を呼び出して、ページが読み込まれている間に検索結果にitemsの値を設定しますが、わかりません。Angularjs2で最初に観測可能な値を設定する方法は?

答えて

0

このようなコンポーネントのngOnInit()関数で検索を開始できるはずです。

ngOnInit() { 
    this.items = this.term.valueChanges 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(term => this.searchService.search('rules', term)); 
    this.term.setValue('search text here', {emitEvent:true}); 
} 

参照用のA2 FormControlのドキュメントへのリンク:私は同じ問題を解いた

this.term.setValue("New York");

+0

に記載されている残念ながら、それは動作しません: 'エラー:キャッチされない(約束で):例外TypeError:this.term.nextがfunction.'ない – Marksman

+0

申し訳ありませんが、私は同様の実装が、私のための「用語」を持っていますタイプは「Subject」です。基本的には、ngOnInitで検索をトリガする方法でtermを設定する必要があります。 – cDecker32

+0

もう一度撮影できますか?私はそれを更新して、formcontrolオブジェクトと一緒に作業しなければならないようにしました。私がドキュメンテーションから集めることができたものを使ったことはありません。 – cDecker32

0

これを試してみてください。正解は次のとおりです。

ngOnInit() { 
    this.items = this.term.valueChanges 
     .startWith('') 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(term => this.searchService.search('rules', term)); 
    this.term.setValue('search text here', {emitEvent:true}); 
} 

重要なのは、観測可能な初期値を放出する部分です(.startWith(initialValue))。それ以上は in ReactiveX documentation

関連する問題