Angular2：单击事件目标会导致无限循环

Question

I want to download a csv file from my angular2 website. For this I get data from a json file. Once the parameters download and href are configurated, I want to simulate a click to launch the download.

However this click cause a infinite loop of download ... How is it possible to resolve this problem and download only one file ?

Here my component.html code :

<div>
    <a class="csv-template" (click)="downloadCSVTemplate($event)">Dowload File</a>
</div>

My component.ts code :

downloadCSVTemplate(event) {
let locale = this.navContextSrvc.locale;

this.http
    .get('assets/csv/template_'+ locale +'.json')
    .subscribe(res => {
        event.target.download = 'template_'+ locale +'.csv';
        event.target.href = 'data:text/csv;charset=utf-8,'
        + encodeURIComponent(res._body);
        event.stopPropagation();
        event.target.click(); // causes infinite loop of download
        event.preventDefault();
    });
}

Answer 1

This:

event.target.click(); // causes infinite loop of download

does not cause an "infinite loop of download", it causes an infinite loop by calling the downloadCSVTemplate over and over.

It's unclear what you are trying to do by calling click() again.

Answer 2

The problem was my async call. The download was launched before that my href attribut changed.

However, because I choose to download files from my client, I just call the file whithout passing by the async call. With this, the download is launched after my changements

Here the code :

downloadCSVTemplate(event) {
    let locale = this.navContextSrvc.locale;
    event.target.download = 'template_'+ locale +'.csv';
    event.target.href = 'assets/csv/template_'+ locale +'.csv';
}