2017-08-02 9 views
0

以下のコードでは、before-null-afterが表示されますが、コンソールには「2」が表示されます。何らかの理由でページが更新されません...どうすれば間違っていますか?非同期パイプに私の観測値が表示されない

"角度/コア@"
import {Component, OnInit} from '@angular/core'; 
import {Http} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import {Subject} from 'rxjs/Subject'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/map' 


@Component({ 
    template: `before-{{searchResult | async | json}}-after`, 
    selector: 'app-root', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 

    searchResult: Observable<String[]>; 

    searchTerms = new Subject<String>(); 

    constructor(private http: Http) { 

    } 

    ngOnInit(): void { 
    console.error(JSON.stringify(['aaaa', 'bbbb'])); 

    this.searchResult = this.searchTerms 
     .switchMap(term => this.http.get('/assets/async.json').map(response => response.json() as String[])); 
    this.searchResult.subscribe(next => console.error(next.length)); 

    this.searchTerms.next('sss'); 
    } 
} 

: "^ 4.0.0"

+1

'subject.next( 'sss')を実行しているときに、テンプレート – yurzui

+0

からのサブスクリプションはありません。たとえばhttps://plnkr.co/edit/kKNHI7NKWsebWmhl32mx?p=previewが動作し、' publishReplay'が動作しますまた助けてくださいhttps://plnkr.co/edit/IOuzGaIcROVnu4fcOhLc?p=preview – yurzui

+0

はい、私は問題を理解します。私は実際にthis.route.queryParamMap.subscribe()を購読するコードでnext()メソッドを実行します。 queryParamを観察してテンプレートに表示する方法はありますか?私は、ユーザーの更新プログラムの検索としてurl paramsを変更したい、そして、私は結果に反応したい。それは正常に動作しますが、最初のページの読み込み中ではありません。 –

答えて

0

代わりの

数がどのように示しsearchTerms = new Subject<String>();

使用

searchTerms = new ReplaySubject<String>(1);

すでに出力されている値の多くはキャッシュされ、emi観測可能で常に最後放射された値を記憶し、この観測可能

または

searchTerms = new BehaviorSubject<String>('');

に加入するときTTE指令は、初期値を与える必要があります。

関連する問題