Angular 财产'；addToast'；不存在于类型'；环球金融公司'；角度5

基本上，我在component.ts文件中有一个名为“addToast”的方法。这是什么-

addToast(options): any {
    if (options.closeOther) {
      this.toastyService.clearAll();
    }

this.position = options.position ? options.position : this.position;

const toastOptions: ToastOptions = {
  title: options.title,
  msg: options.msg,
  showClose: options.showClose,
  timeout: options.timeout,
  theme: options.theme,
  onAdd: (toast: ToastData) => {
    /* added */
  },
  onRemove: (toast: ToastData) => {
    /* removed */
  }
};

switch (options.type) {
  case "default":
    this.toastyService.default(toastOptions);
    break;
  case "info":
    this.toastyService.info(toastOptions);
    break;
  case "success":
    this.toastyService.success(toastOptions);
    break;
  case "wait":
    this.toastyService.wait(toastOptions);
    break;
  case "error":
    this.toastyService.error(toastOptions);
    break;
  case "warning":
    this.toastyService.warning(toastOptions);
    break;
}


}

onLoadFile(event) {
    var img = new Image();
    img.src = event.target.result;
    var isUploadPic = null;

    img.onload = function(): any {
      console.log(img.width, "x", img.height);
      // var isUploaded = false;
      if (img.width != 600 && img.height != 600) {
        this.addToast({
          title: "FAIL!",
          msg: "Diamension Should Be 600x600.",
          timeout: 6000,
          theme: "default",
          position: "top-right",
          type: "error"
        });
      }
    };

    console.log(isUploadPic);


  } 

我试着用这个方法来处理另一个叫做“onLoadFile”的方法。这是什么-

addToast(options): any {
    if (options.closeOther) {
      this.toastyService.clearAll();
    }

this.position = options.position ? options.position : this.position;

const toastOptions: ToastOptions = {
  title: options.title,
  msg: options.msg,
  showClose: options.showClose,
  timeout: options.timeout,
  theme: options.theme,
  onAdd: (toast: ToastData) => {
    /* added */
  },
  onRemove: (toast: ToastData) => {
    /* removed */
  }
};

switch (options.type) {
  case "default":
    this.toastyService.default(toastOptions);
    break;
  case "info":
    this.toastyService.info(toastOptions);
    break;
  case "success":
    this.toastyService.success(toastOptions);
    break;
  case "wait":
    this.toastyService.wait(toastOptions);
    break;
  case "error":
    this.toastyService.error(toastOptions);
    break;
  case "warning":
    this.toastyService.warning(toastOptions);
    break;
}


}

onLoadFile(event) {
    var img = new Image();
    img.src = event.target.result;
    var isUploadPic = null;

    img.onload = function(): any {
      console.log(img.width, "x", img.height);
      // var isUploaded = false;
      if (img.width != 600 && img.height != 600) {
        this.addToast({
          title: "FAIL!",
          msg: "Diamension Should Be 600x600.",
          timeout: 6000,
          theme: "default",
          position: "top-right",
          type: "error"
        });
      }
    };

    console.log(isUploadPic);


  } 

但它向我显示了VSCODE上的一个错误，即“类型'GlobalEventHandlers'上不存在属性'addToast'。我正在分享一幅这样的画面

我还分享了控制台错误的图片。在下面

请告诉我如何在该职位上使用“addToast”方法。给我一个解决方案。

问题 您正在使用嵌套的匿名函数，这就是上下文已更改的原因，

此

指向的是

GlobalEventHandlers

而不是组件类

修理 您有两个选项来解决此问题

修正1

第一个修复方法是保留

this

的引用，并在匿名函数中使用它。当前上下文（

this

）可以分配给某个变量，比如

self

，并且可以在深嵌套函数中的任何位置使用<代码>此可能会更改，但是

self

将始终指向父项

   let self = this;
    img.onload = function(): any {
          console.log(img.width, "x", img.height);
          // var isUploaded = false;
          if (img.width != 600 && img.height != 600) {
            self.addToast({
              title: "FAIL!",
              msg: "Diamension Should Be 600x600.",
              timeout: 6000,
              theme: "default",
              position: "top-right",
              type: "error"
            });
          }
        };

修正2

第二个选项是使用箭头功能。在箭头函数

中，此

始终指向调用它的上下文。这是比修复1更好的方法

img.onload = () => {
      console.log(img.width, "x", img.height);
      // var isUploaded = false;
      if (img.width != 600 && img.height != 600) {
        this.addToast({
          title: "FAIL!",
          msg: "Diamension Should Be 600x600.",
          timeout: 6000,
          theme: "default",
          position: "top-right",
          type: "error"
        });
      }
    };

---

不要使用匿名函数。使用箭头函数：

img.onload=（）=>{…}

使用箭头函数在我的情况下很有效，谢谢！