javascript - 在角度 9 中更改选项卡时停止上传文件

Question

我有一个编辑表格。

在这种形式中，我有两个选项卡 =>tab A用于编辑和tab B上传文件。

这是我的代码形式：

<div class="form-container">

<mat-tab-group dynamicHeight (selectedTabChange)="activateTab($event.index)" class="col-xs-12 col-sm-12 col-md-12 col-sm-offset-1 col-md-offset-2 p-0">
    <mat-tab [label]="'NEWS.EDIT' | translate">
        <div class="form-content">
            <form class="form" id="postform" [formGroup]="newsEditForm" (ngSubmit)="onSubmit()" autocomplete="off">

                <mat-form-field class="mat-form-field-fluid" appearance="outline">
                    <mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
                    <input matInput formControlName="title" [placeholder]="'GENERAL.TITLE' | translate">
                    <mat-error *ngIf="newsEditForm.get('title').errors?.required">
                        {{ 'MAGAZINE_SHARE.VALIDATION.REQUIRED.TITLE' | translate }}</mat-error>
                    <mat-error *ngIf="newsEditForm.get('title').errors?.maxlength">
                        {{ 'MAGAZINE_SHARE.VALIDATION.MAX_LENGTH.TITLE' | translate }}</mat-error>
                </mat-form-field>
    </form>
    </mat-tab>
    <mat-tab [label]="'MAGAZINE_SHARE.FIELS' | translate">

        <kt-list-file-news [postId]="postId" [apiControllerName]="apiControllerName" [postFileList]="editNewsModelOld.files" [urlShowFile]="urlShow" [coverUrlShowFile]="coverUrlShowFile" [service]="newsService" [IdName]="'postId'" [fileService]="fileService">
        </kt-list-file-news>

    </mat-tab>
</mat-tab-group>
<!-- end form -->

这是上传文件的组件tab B：

    <kt-list-file-news [postId]="postId" [apiControllerName]="apiControllerName" [postFileList]="editNewsModelOld.files" [urlShowFile]="urlShow" [coverUrlShowFile]="coverUrlShowFile" [service]="newsService" [IdName]="'postId'" [fileService]="fileService">
    </kt-list-file-news>

现在我有一个问题。当我以上传表单上传文件时，我除了去上传，例如 32% 的百分比我更改选项卡，我需要在后台上传文件但是当我回到上传选项卡时，我看到文件上传是停了下来。有什么问题 ？我怎么解决这个问题 ？？？

    this.subscriptions.push(this.service
        .UplaodFile(uploadModel, this.apiControllerName)
        .subscribe(
            (event: HttpEvent<any>) => {
                switch (event.type) {
                    case HttpEventType.UploadProgress:
                        if (event.total) {
                            this.queueProgress = Math.round(event.loaded / event.total * 100);
                            btnProgress[0].innerText = this.queueProgress + ' % ';
                            progressLine[0].width = this.queueProgress;
                            progressLine[0].setAttribute('style', 'width:' + 0 + '%');
                            progressLine[0].setAttribute('style', 'width:' + this.queueProgress + '%');
                            this.cdRef.detectChanges();
                        }
                        break;
                    case HttpEventType.Response:
                        if (event.body['success']) {
                            this.queueProgress = null;
                            this.alertService.success('', 'GENERAL.ADD_SUCCESS');
                            this.removeItem(index, false);
                            this.uploadBtndisabel = true;
                            this.fileUpload.type = this.fileType.Text;
                            this.previewActive = true;
                            this.queueProgress = 0;
                            this.uploadPalceHolder = undefined;
                            this.uploadActive = true;
                            this.postFileList.push(event.body['result']);
                            this.cdRef.detectChanges();
                        }
                        this.loading = false;
                        this.queueProgress = null;
                        break;
                }
            },
            () => {
                this.loading = false;
                this.queueProgress = null;
            }
        ));

标签： javascriptangulartypescriptangular-material