Кнопка Отключить во время загрузки Angular 4

Question

Я использую Angular 4 в моем приложении.Я реализовал функцию загрузки, которая будет обработана после нажатия одной кнопки.Когда загрузка будет завершена, пользователь увидит ссылку для скачивания ниже.Теперь данные для загрузки поступают из остальных 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

Свяжите отключенное свойство с кнопкой.

Создайте логическое значение checkDownload в своем файле component.ts и установите для него значение 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;
}

Answer 2

Просто добавьте условие к вашей кнопке:

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