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. — jBuchholz, May 27 '20 at 19:09

mr. pc_coder · Accepted Answer · 2020-05-27T20:18:59.747

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 '20 at 20:18

answered May 27 '20 at 19:21

mr. pc_coder

16,412
3
32
54

In this case file.txt have an html, not subscribers email value – prolina May 27 '20 at 19:33
Observables work asynchronously so it doesn't matter where data comes. You need to take inside subscribe – mr. pc_coder May 27 '20 at 19:47
It works correct only if I pass res `const blob: Blob = new Blob([res]], {type: 'application/octet-stream'}); ` inside subscribe – prolina May 27 '20 at 20:10
if u directly assign res to blob then you don't need to assignt to this.data – mr. pc_coder May 27 '20 at 20:18
oh, sorry, with res I have the same problems. The value of file is correct only after the second button click( – prolina May 27 '20 at 20:20
put ngIf to button if fileUrl filled That can be sync problem too. Second can work because while you click second time it filled. You should hide button until href filled – mr. pc_coder May 27 '20 at 20:23
when I click on the button for the first time, the file contains html, and the second time and subsequent ones - the necessary information – prolina May 27 '20 at 20:33
Yes , because for first time it is empty then not download anything . I suggest you to use filesaver plugin easy to add project and use – mr. pc_coder May 27 '20 at 20:39
in my case there is no better solution than the plugin? – prolina May 28 '20 at 07:08
You can fill url witout clicking while ngOnInit or in constructor and remove onclick just stay jus a element tah in html . – mr. pc_coder May 28 '20 at 07:40
Thank you so much for your answers, I use filesaver plugin and it works good for me :) – prolina May 28 '20 at 09:23
You’re welcome :) .That is common plugin to use to file download – mr. pc_coder May 28 '20 at 09:30

ruth · Answer 2 · 2020-05-28T06:43:06.650

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 '20 at 06:43

answered May 27 '20 at 19:16

ruth

29,535
4
30
57

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 – prolina May 27 '20 at 19:31
The other statements were also dependent on the async data. They should be moved inside the subscription as well. I've updated the answer. – ruth May 28 '20 at 06:43

Angular: variable is not updated after subscribing

2 Answers2