Question

在typescript中，似乎RxJS Observable.flatMap在使用Observable.fromPromise（promise）创建的Observable时行为不正确。

我怀疑它不会触发更改检测。

我有这两个函数（在_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();
                    });
           });
    }

我的视图未更新，我需要点击某处（如按钮）才能显示检索到的数据。

但是当我使用 BasicObservable（）而不是 ObservableFromPremise（）时，我的视图会更新。

以下是我如何处理函数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>

在这两种情况下，我都在控制台中检索了检索到的数据，以及“Get Item completed”，但是使用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;
   });
}

我希望有人能分享一个真正的解决方案=）

Answer 1

您是否应该使用NgZone更新UI，如下所示：

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

...并且在您的订阅中返回之后调用此更新函数：

.subscribe((data:User) => {
            this.update();
            this.myItems = data;
        },

Answer 2

不让我评论，猜猜我应该建立代表。回答Angular 4，以防你因为某种原因仍然在2岁。

这不是RxJS问题的声音（如控制台日志所示）。你没有发布组件中的相关位（比如装饰器），但是我假设你正在使用OnPush变化检测策略？如果是这样，那么你需要使用@Input（）装饰器来标记myItems。

@Input() public myItems: User;

或者，如果你想要强力路线，你可以注入一个ChangeDetectorRef并在其上调用markForCheck（）。

constructor(private changeRef: ChangeDetectorRef) {}
...
// in your subscribe()
this.myItems = data;
this.changeRef.markForCheck(); // or call detectChanges() to immediately do so

RxJS和typescript：Observable.flatMap行为不正确

2 个答案: