ngx-toastr 在 Angular 5 服务的上传功能中不工作

Question

我在我的 Angular 5 项目中使用 ngx-toastr。我的项目中有一项服务用于将文件上传到 AWS 存储桶。

问题是我想在我的服务中使用 Ngx-toastr 来通知文件是成功上传还是出现错误，但它不起作用。谁能帮帮我？

这是我的 upload_file_service:

import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk/global';
import * as S3 from 'aws-sdk/clients/s3';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
@Injectable()
export class UploadFileService {

  FOLDER = 'sample';

  constructor(
    private spinner: NgxSpinnerService,
    private _toastr: ToastrService,
  ) { }

  uploadfile(file) {
    this._toastr.info("uploading" , "Info");  //this one is working fine.
    // this.spinner.show();
    const bucket = new S3(
      {
        accessKeyId: 'sample',
        secretAccessKey: 'sample',
        region: 'sample'
      }
    );

    const params = {
      Bucket: 'bucek_name',
      Key: this.FOLDER + file.name,
      Body: file
    };

    bucket.upload(params, function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        // this.spinner.hide();
        // this._toastr.error("File Upload Failed, Please Try Again!",  "Error");
        return false;
      }
      console.log('Successfully uploaded file.', data.Location);
      localStorage.setItem('uploaded_data_path' , data.Location);
      // this._toastr.success("File Upload Faild, Please Try Again!" , "Success"); 
      //not working, gives error that success property is not found.
      // this.spinner.hide();   //Not working
     return true; 
    }
  );
  }
}

Answer 1

您正在尝试访问 function() 块内的 this。

一个函数创建了它自己的 scope，以及它自己的 this，有效地覆盖（替换）了 UploadFileService 的 this。

要解决此问题，您可以使用 ES6 arrow notation 函数，它不会在函数块内创建新范围：

bucket.upload(params, (err, data) => {
    ...
    this._toastr.success("File Upload Faild, Please Try Again!" , Success");
    ...
}

ngx-toastr 在 Angular 5 服务的上传功能中不工作

ngx-toastr not working inside upload function of Angular 5 service

toastr

angular

angular5