在Angular 6中,点击按钮时创建按钮旋转器,无需调用服务。

huangapple go评论74阅读模式
英文:

Create button spinner when clicked in angular 6 without service call

问题

我想在下载PDF文件时显示和隐藏旋转器。
我的代码如下:这是我的HTML组件代码

<div>
  <ng-container *ngFor="let p of selectedStudent.photos.list; let i = index">
    <div *ngIf="p.eventName === 'FLIPBOOK'; then ifcondition"></div>
    <ng-template #ifcondition>
      <div class="flipbook-img">
        <button class="btn btn-primary isLoadSpring" [disabled]="isLoadingSpring" (click)="downloadMyFile(selectedStudent.schoolId)">
          <!-- <i class="fa fa-file-pdf-o"></i> -->
          <i class="fa fa-spinner fa-spin" *ngIf="isLoadingSpring"></i> Download
        </button>
        <img [src]="getImageForFlipBook(1, p.imageUrl, p.rotationAngle, 300)" class="photoimges" />
      </div>
    </ng-template>
  </ng-container>
</div>

我的.ts代码。

downloadMyFile(id: number) {
  this.isLoadingSpring = true;
  const link = document.createElement('a');
  link.setAttribute('target', '_blank');
  link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
  link.setAttribute('download', 'Year-Book.pdf');
  document.body.appendChild(link);
  link.click();
  link.remove();
}

当我点击按钮时,旋转器会显示,文件会下载,但我的旋转器仍然没有停止。请帮助我。

英文:

I want to show and hide spinner when i download the pdf file.
My code is as below:-This is my Html component code

&lt;div &gt;
              &lt;ng-container *ngFor=&quot;let p of selectedStudent.photos.list;let i = index&quot;&gt;
                &lt;div *ngIf=&quot;p.eventName === &#39;FLIPBOOK&#39;; then ifcondition &quot;&gt;&lt;/div&gt;
                &lt;ng-template #ifcondition&gt;
                  &lt;div class=&quot;flipbook-img&quot; &gt;
                    &lt;button class=&quot;btn btn-primary isLoadSpring&quot; [disabled]=&quot;isLoadingSpring&quot; (click)=&quot;downloadMyFile(selectedStudent.schoolId)&quot;&gt;
                  &lt;!--&lt;i class=&quot;fa fa-file-pdf-o&quot;&gt;&lt;/i&gt;--&gt;
                  &lt;i class=&quot;fa fa-spinner fa-spin&quot; *ngIf=&quot;isLoadingSpring&quot;&gt;&lt;/i&gt;Download                   
                &lt;/button&gt;
                    &lt;img [src]=&quot;getImageForFlipBook(1,p.imageUrl,p.rotationAngle,300)&quot; class=&quot;photoimges&quot; /&gt;
                  &lt;/div&gt;
                &lt;/ng-template&gt;
              &lt;/ng-container&gt;
            &lt;/div&gt;

My .ts code.

downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement(&#39;a&#39;);
link.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
link.setAttribute(&#39;href&#39;, &#39;/assets/files/&#39; + id + &#39;/Year-Book.pdf&#39;);
link.setAttribute(&#39;download&#39;, &#39;Year-Book.pdf&#39;);
document.body.appendChild(link);
link.click();
link.remove();

}

when i click button spinner is a display and file is download but still my sppiner is not stop . Kindly help me

答案1

得分: 0

取消链接移除后的 this.isLoadingSpring。

downloadMyFile(id: number) {
    this.isLoadingSpring = true;
    const link = document.createElement('a');
    link.setAttribute('target', '_blank');
    link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
    link.setAttribute('download', 'Year-Book.pdf');
    document.body.appendChild(link);
    link.click();
    link.remove();

    this.isLoadingSpring = false;
}
英文:

Unset this.isLoadingSpring after link removal.

downloadMyFile(id: number) {
    this.isLoadingSpring = true;
    const link = document.createElement(&#39;a&#39;);
    link.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
    link.setAttribute(&#39;href&#39;, &#39;/assets/files/&#39; + id + &#39;/Year-Book.pdf&#39;);
    link.setAttribute(&#39;download&#39;, &#39;Year-Book.pdf&#39;);
    document.body.appendChild(link);
    link.click();
    link.remove();

    this.isLoadingSpring = false;

}

答案2

得分: -1

async downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
await link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
await this.delay(3000);
this.isLoadingSpring = false;
}

private delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}

英文:

I had done changes in my code :

async downloadMyFile(id: number) {
    this.isLoadingSpring = true;
    const link = document.createElement(&#39;a&#39;);
    link.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
    link.setAttribute(&#39;href&#39;, &#39;/assets/files/&#39; + id + &#39;/Year-Book.pdf&#39;);
    await link.setAttribute(&#39;download&#39;, &#39;Year-Book.pdf&#39;);
    document.body.appendChild(link);
    link.click();
    link.remove();
    await this.delay(3000);
    this.isLoadingSpring = false;
  }

  private delay(ms: number) {
    return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }

huangapple
  • 本文由 发表于 2020年1月6日 20:00:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/59611744.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定