如有任何错误，请隐藏进度条

Question

我试图隐藏进度条，以防任何失败或成功。为此我使用* ngIf并将其与loading（布尔值）进行比较。 为了成功，我可以这样做而且它正在发挥作用。

编辑：现在以某种方式我可以在s3上传器类中访问加载boolean变量但是它的结果是true或false并不会在微调器中产生任何差异。我的更新代码

export class SlotsUploadComponent implements OnInit {
    loading: boolean;
    color = "primary";
    mode = "indeterminate";
    value = 50;
    bufferValue = 75;
    currentUser;
    uploader: S3Uploader;
    imagePath: string;
    config = new S3Config();
    constructor(
        private http: Http,
        private storageService: StorageService,
        private toaster: ToastrService
    ) {
        this.currentUser = JSON.parse(this.storageService.getToken());
        console.log(this.currentUser);
        if (this.currentUser.role === "Admin") {
            this.config.accessKey = this.currentUser.accessKey;
            this.config.bucket = this.currentUser.bucketNameSlot;
            this.config.secretAccessKey = this.currentUser.secretKey;
            this.config.region = this.currentUser.regionVal;
            console.log(this.config);
        }
        this.uploader = new S3Uploader(this.toaster, this.loading);

        // Input your S3 Config
        this.uploader.init(http, this.config);
    }

    upload(event) {
        this.loading = true;
        let file = event.srcElement.files[0];
        this.uploader.upload(file).then(x => {
            console.log(x);
        });
        console.log(this.config);
    }

    ngOnInit() {}
}

export class S3Config {
    bucket: string;
    accessKey: string;
    secretAccessKey: string;
    region: string;
    folder: string;
}

@Injectable()
export class S3Uploader {
    constructor(private toaster: ToastrService, private loading: boolean) {
        console.log(this.toaster);
    }

    private config: S3Config;
    private http: Http;
    init(http: Http, config: S3Config) {
        this.http = http;
        this.config = config;
    }


    upload(file: any): Promise < any > {
        let statusCode = "201";
        let date = this.generateTimestamp();
        let datetime = date + "T000000Z";

        let credential = `${this.config.accessKey}/${date}/${
      this.config.region
    }/s3/aws4_request`;

        let policy = JSON.stringify({
            expiration: new Date(Date.now() + 100000).toISOString(),
            conditions: [{
                    bucket: this.config.bucket
                },
                ["starts-with", "$key", ""],
                {
                    acl: "public-read"
                },
                ["starts-with", "$Content-Type", ""],
                {
                    "x-amz-credential": credential
                },
                {
                    "x-amz-algorithm": "AWS4-HMAC-SHA256"
                },
                {
                    "x-amz-date": datetime
                },
                {
                    "success_action_status": statusCode
                }
            ]
        });

        let policyBase64 = window.btoa(policy);
        let signatureKey = this.generateSignatureKey(
            this.config.secretAccessKey,
            date,
            this.config.region,
            "s3"
        );
        let signature = CryptoJS.HmacSHA256(policyBase64, signatureKey).toString(
            CryptoJS.enc.Hex
        );
        let formData = new FormData();

        formData.append("acl", "public-read");
        formData.append("Content-Type", file.type);
        formData.append("X-Amz-Date", datetime);
        formData.append("X-Amz-Algorithm", "AWS4-HMAC-SHA256");
        formData.append("X-Amz-Credential", credential);
        formData.append("X-Amz-Signature", signature);
        formData.append("Policy", policyBase64);
        formData.append("key", file.name);
        formData.append("file", file);
        //    formData.append("success_action_status", statusCode);
        return new Promise((resolve, reject) => {
            this.http
                .post(`https://${this.config.bucket}.s3.amazonaws.com/`, formData)
                .subscribe(
                    x => {
                        console.log(x);

                   
                        if (x.status === 204) {
                            console.log("success");
                                    this.loading = false;
                            this.toaster.success("Uploaded!,Success!");
                        } else if (x.status === 403) {
                                   this.loading = false;
                            this.toaster.error("forbidden bro");
                        }

                        resolve(x.headers.get("Location"));
                    },
                    x => {
                        console.error(x);
                        if (x.status === 403) {
                                    this.loading = false;
                            this.toaster.error("forbidden bro");
                        }
                        reject();
                    }
                );
        });
    }




}

但是如果出现错误，不知何故我必须在S3上传器类中传递它，我尝试传递它就像我传递给它的方式但它总是给我未定义。

低于我的TS和HTML

＆＃13;

＆＃13;

<input type="file" (change)="upload($event)" placeholder="Upload file" accept=".xlsx" />
<section class="example-section" *ngIf="loading" >
  <mat-progress-bar class="example-margin" [color]="color" [mode]="mode" [value]="value" [bufferValue]="bufferValue">
  </mat-progress-bar>
</section>

＆＃13;

try:
    category = Category.objects.get(format=format, page=page, order=order)
except Category.DoesNotExist:
    # either make it None or create new category, depends on your requirement
    category = None
    # or create new category
except Category.MultipleObjectsReturned:
    category = category.first() # it depends on your requirement
item.category = category

＆＃13;

＆＃13;

＆＃13;