Question

我在我的应用中使用角度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

将已禁用的属性绑定到按钮。

在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;
}

下载过程中禁用按钮Angular 4

2 个答案: