下载正在进行时禁用按钮Angular 4

Question

我在我的应用程序中使用 angular 4。我实现了一个下载功能，单击一个按钮后将对其进行处理。下载完成后，用户将看到下面的下载链接。现在下载数据来自rest api。我正在使用 ngx-progressbar 来显示下载进度。当用户每次单击下载按钮时，他会收到“OK”或“Not Ok”的通知（如果 newtwork 发生错误）。我现在在处理有角的东西方面很新。我想在下载过程中禁用该按钮。但在我的情况下，我可以一直单击该按钮，即使它正在进行中。我想知道我怎样才能禁用我的按钮。这是我的代码。我只给出相关的代码

已解决的代码

angular.ts

import { NgProgress } from 'ngx-progressbar';

export class downloadReportComponent implements OnInit {

private buttonDisabled: boolean = false;

constructor( private websocketService: WebSocketService,
             public progressService: NgProgress) {
             }

ngOnInit() {
    this.currentUser = this.authService.userSnapshot;
    this.loadReportConfig();
    this.downloadReport();
}

downloadReport(){
    //download report code
}
startLoading() {
    this.progressService.start();
    this.buttonDisabled=true;
}

stopLoading() {
    this.progressService.done();
    this.buttonDisabled=false;
}

doTestReport() {
    this.buttonDisabled=true;
    this.disco.getResourceTree().subscribe( api => {

        this.http.get( api.metrics.test.uri )
            .subscribe( r => {
                if(r!=null) {
                    this.notificationService.showOK("OK");
                    this.buttonDisabled=false;
                }
                }, e => {
                this.notificationService.showError( "not so OK" );
                console.log( "error", e );
            } );
    } );

HTML 代码：

<div fxLayout="row" fxLayoutAlign="right" class="overview-actions">
<mat-card-actions >
<button class="material-icons" (click)="doTestReport()" [disabled]="buttonDisabled" >&#xE149;</button>
</mat-card-actions>
</div>
<ng-progress
        [minimum]="0.15"
        [maximum]="1"
        [positionUsing]="'marginLeft'"
        [direction]="'leftToRightIncreased'"
        [color]= "'#f5f5f5'"
        [trickleSpeed]="500"
        [thick]="true"
        [ease]="'linear'">
</ng-progress>

Answer 1

只需为您的按钮添加一个条件：

<button class="material-icons" (click)="doTestReport()" [disabled]="buttonDisabled">&#xE149;</button>

Answer 2

将 disabled 属性绑定到按钮。

在您的 component.ts 文件中创建 checkDownload 布尔值，并在您开始下载时将其设置为 true，并在下载完成或停止下载时将其设置为 false。

<button class="material-icons" [disabled]="checkDownload" (click)="doTestReport()" >&#xE149;</button>

component.ts

checkDownload = false;

downloadStart() {
this.checkDownload = true;
// your download code
// download completed.
this.checkDownload = false;
}

downloadStop() {
// Stop code
this.checkDownload = false;
}