Skip to content

Http.get returned observables don't trigger a change detection #10208

@leonceeo

Description

@leonceeo

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Using angular2-rc.4

I have a rxjs Observable returned by a http.get(...) operation. I'm subscribing to it, however the model changes which occur in the subscription don't get reflected in the UI. Invoking the http.get(...) operation once again triggers the UI updates which should have happened previously.

If I convert the Observable to a Promise, things work as expected. The Promise subscription modifies the variables which in turn trigger the angular change detection.

I've noticed that the rxjs subscribing function doesn't get called inside a ngzone.

VM43288 app.ts!transpiled:48 console.trace()(anonymous function) @ VM43288 app.ts!transpiled:48SafeSubscriber.__tryOrUnsub @ VM43294 Subscriber.js:225SafeSubscriber.next @ VM43294
Subscriber.js:174Subscriber._next @ VM43294
Subscriber.js:124Subscriber.next @ VM43294
Subscriber.js:88Subscriber._next @ VM43294
Subscriber.js:124Subscriber.next @ VM43294
Subscriber.js:88MapSubscriber._next @ VM43306
map.js:82Subscriber.next @ VM43294
Subscriber.js:88onLoad @ VM43634
xhr_backend.js:68

Promise subscription get's called inside a ngzone

(anonymous function) @ VM43288 app.ts!transpiled:55
ZoneDelegate.invoke @ VM43271 zone.js@0.6.12:281
onInvoke @ VM43368 ng_zone_impl.js:53
ZoneDelegate.invoke @ VM43271 zone.js@0.6.12:280
Zone.run @ VM43271 zone.js@0.6.12:174
(anonymous function) @ VM43271 zone.js@0.6.12:529
ZoneDelegate.invokeTask @ VM43271 zone.js@0.6.12:314
onInvokeTask @ VM43368 ng_zone_impl.js:44
ZoneDelegate.invokeTask @ VM43271 zone.js@0.6.12:313
Zone.runTask @ VM43271 zone.js@0.6.12:214
drainMicroTaskQueue @ VM43271 zone.js@0.6.12:432

Expected/desired behavior
I'm expecting the Observable subscription to work the same as the Promise subscription.

Reproduction of the problem
Plunker

The app displays two buttons. On the first button, I'm using rxjs observables, on the second one js promises. A click on the first button doesn't show anything, a second event is necessary in order to trigger change detection. The second button reacts on the first click.

What is the expected behavior?

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Angular version: 2.0.0-rc.4
  • Browser: [Chrome 53.0.2785.8 | Firefox 47.0 | Safari 9.1.1 ]
  • Language: [TypeScript 1.8]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions