Angular: variable is not updated after subscribing

Question

I have a service, that returns Observables<SubscriberModel[]>.

export interface SubscriberModel {
    email: string;
}

in my component I get subscribers$ in constructor:

public subscribers$: Observable<SubscriberModel[]>;
this.subscribers$ = this.subscribersService.getAll();

and show their in template:

<p *ngFor="let subscriber of subscribers$ | async">{{subscriber.email}}</p>
<button (click)="onDownloadClick()">
    <a [href]="fileUrl" download="file.txt">DownloadFile</a>
</button>

I have to download my subscribers into file:

public data: any;

public onDownloadClick(): void {
    this.subscribers$.pipe(
        map(res => res.map(i => i.email)),
    )
        .subscribe(res => {
            console.log(res) //array of string
            this.data = res;
        });

    console.log(this.data); //undefined
    const blob: Blob =
        new Blob([this.data], {type: 'application/octet-stream'});

    this.fileUrl =
        this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
}

Why in console.log this.data is undefined?

Observables work asynchronously. Therefore the code following your subscription runs before the subscription finishes. — jSebestyén
– jSebestyén, Commented May 27, 2020 at 19:09

Cagri Tacyildiz · Accepted Answer · 2020-05-27 20:18:59Z

4

put your process related service's subscribe's inside. Async functions doesn't stop another process. So code goes on with next line while it is still executed. so outside of async function may not read data due to response of server.

public onDownloadClick(): void {
   this.subscribers$.pipe( map(res => res.map(i => i.email)),)
   .subscribe(res => {
       console.log(res) //array of string
       this.data = res;
       console.log(this.data); //undefined
       const blob: Blob = new Blob([res], {type: 'application/octet-stream'});       
       this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
    });

}

edited May 27, 2020 at 20:18

answered May 27, 2020 at 19:21

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

prolina Over a year ago

In this case file.txt have an html, not subscribers email value

Cagri Tacyildiz Over a year ago

Observables work asynchronously so it doesn't matter where data comes. You need to take inside subscribe

prolina Over a year ago

It works correct only if I pass res const blob: Blob = new Blob([res]], {type: 'application/octet-stream'}); inside subscribe

Cagri Tacyildiz Over a year ago

if u directly assign res to blob then you don't need to assignt to this.data

prolina Over a year ago

oh, sorry, with res I have the same problems. The value of file is correct only after the second button click(

|

Barremian · Accepted Answer · 2020-05-28 06:43:06Z

2

this.data is assigned data asynchronously. As such, all the dependent statements must be inside the subscription. So the console.log should be inside the subscription

public data: any;

public onDownloadClick(): void {
  this.subscribers$.pipe(
    map(res => res.map(i => i.email)),
  )
  .subscribe(res => {
    console.log(res) //array of string
    this.data = res;
    console.log(this.data);
    const blob: Blob = new Blob([this.data], {type: 'application/octet-stream'});
    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
  });
}

More info on accessing asynchronous data: https://stackoverflow.com/a/14220323/6513921

edited May 28, 2020 at 6:43

answered May 27, 2020 at 19:16

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

2 Comments

prolina Over a year ago

But in this case value in file.txt is undefined and only if I click the second time to download button, the file includes correct value

Barremian Over a year ago

The other statements were also dependent on the async data. They should be moved inside the subscription as well. I've updated the answer.

Collectives™ on Stack Overflow

Angular: variable is not updated after subscribing

2 Answers 2

12 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related