CODEWITHSUNDEEP
angularrxjs
Wolf359
Wolf359

Reputation: 2715

Angular/RxJs: subscription via async pipe doesn't diplay emitted value

I instantiate a class 'Calc' which returns an Observable as a member.

Inside the template, I subscribe via async pipe to the observable and can see that it emits values every second in the console, but the values aren't printed to output (between [ ] in template):

import { Component, VERSION } from "@angular/core";
import { interval, Observable } from "rxjs";
import { map } from "rxjs/operators";

class Calc {
  get left$(): Observable<string> {
    return interval(1000).pipe(
      map(val => {
        const ret = new Date().toString();
        console.log(ret);
        return ret;
      })
    );
  }
}

@Component({
  selector: "my-app",
  template: `
    [{{ calc.left$ | async }}]
  `
})
export class AppComponent {
  calc = new Calc();
}

Stackblitz

What exactly is the problem (zone.js?) and how can it be solved?

Upvotes: 0

Views: 37

Answers (1)

ukn
ukn

Reputation: 1793

Your getter is being called just like a function(every time the change detection runs) which means the returned value is always a new observable. At least this is what I think. Try this out:

@Component({
  selector: "my-app",
  template: `
    [{{ date | async }}]
  `
})
export class AppComponent implements OnInit {
  calc = new Calc();
  date: Observable<string>
  ngOnInit() {
    this.date = this.calc.left$;
  }
}

Upvotes: 1

Related Questions