1

typescript では、RxJS Observable.flatMap が Observable.fromPromise(promise) で作成された Observable で正しく動作していないようです。

変更検出をトリガーしないと思われます。

これらの2つの機能があります(_httpClientクラス内):

ObservableFromPremise() : Observable<boolean>{
        var promise =  this._storage.getJson('authToken').then((token) => {
            return true;
        });
        return Observable.fromPromise(promise)
}

BasicObservable() : Observable<boolean>{
     return Observable.create(observer => {
         observer.next(true);
         observer.complete();
     });
}

私がこれを行うとき：

  public get = (url: string) : Observable<Response>  => {

       return this.ObservableFromPremise()
        .flatMap((x) => {
                return this.http.get(url, {headers:this._headers})
                    .map( (responseData) => {
                        return responseData.json();
                    });
           });
    }

ビューが更新されず、取得したデータを表示するには、どこか (ボタンなど) をクリックする必要があります。

しかし、 ObservableFromPremise( ) の代わりにBasicObservable()を使用すると、ビューが更新されます。

関数 get (UserConnector クラス内) の処理方法は次のとおりです。

public makeRequest = (id: number): Observable<User> => {
    return this._httpClient.get('http://jsonplaceholder.typicode.com/posts/1')
        .map((item:any) => {
            return new User({
                id: item.id,
                userId: item.userId,
                title: item.title,
                body: item.body
            });

        });
}

そして私のページで：

public myItems: User;

constructor(private userConnector: UserConnector) {

}

ngOnInit() {
        this.getAllItems();
}

private getAllItems(): void {
    this.userConnector
        .makeRequest(this.selectedItem.id)
        .subscribe((data:User) => {
            console.log(data);
            this.myItems = data;
        },
            error => console.log(error),
            () => {console.log('Get Item completed'); });
}

そして、ここにテンプレートがあります:

     <div class="thumbnail" *ngIf="myItems">
         <div class="caption">
             <h3>{{myItems.title}}</h3>
             <p>{{myItems.body}}</p>
             <p>{{myItems.id}}</p>
             <p>{{myItems.userId}}</p>
         </div>
     </div>

どちらの場合も、取得したデータをコンソールに記録し、「アイテムの取得が完了しました」が、ObservableFromPremise() を使用すると、データは画面上で更新されません (ボタンをクリックするまで)。

私の設定：angular2（2.0.0-rc.1）、RxJS（5.0.0-beta.6）、zone.js（0.6.12）、e6-shim（0.35.00）

これについて何ができますか？私のコードのバグですか？zone.jsで？RxJSで？

助けてくれてありがとう

編集 1 : @Richard-Silveira で提案されているように、一時的な回避策として NgZone を使用します。

.subscribe((data:User) => {
   this._ngZone.run(() => {
      this.myItems = data;
   });
}

誰かが実際の解決策を共有してくれることを願っています =)

4

2 に答える 2

2

次のように NgZone を使用して UI を更新する必要があります。

private update() {
    this._zone.run(() => {
        console.log('auth updated!');
    });
}

...そして、サブスクライブ呼び出しで戻った後、この更新関数を呼び出します。

.subscribe((data:User) => {
            this.update();
            this.myItems = data;
        },
于 2016-05-20T17:58:05.587 に答える