属性"addToast"在类型"GlobalEventHandlers" angular 5上不存在 [英] Property 'addToast' does not exist on type 'GlobalEventHandlers' angular 5

问题描述

基本上，我的component.ts文件中有一个称为"addToast"的方法.这是:-

basically i have a method called "addToast" in my component.ts file. which is this :-

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"的方法.这是:-

and i'm try to using this method to another method called "onLoadFile". which is this :-

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'".我正在分享一张照片.

but it showing me an error on VSCODE, which is "Property 'addToast' does not exist on type 'GlobalEventHandlers'". i am sharing a image of that.

我也正在共享控制台错误的图像.在下面.

and also i'm sharing the image of console ERROR. which is below.

请告诉我如何在该位置使用"addToast"方法.给我一个解决方案.

Please tell me how can i use the "addToast" method on that position. give me a solution.

推荐答案

问题

您正在使用嵌套的匿名函数，这就是为什么上下文已更改并且this指向GlobalEventHandlers而不是Component类的原因.

Issue

You are using nested anonymous function and that is why context has been changed and this is point to GlobalEventHandlers not the Component class.

您有两种方法可以解决此问题

You have two options to fix this issue

修复1

第一个修复程序，用于保留this的引用并在匿名函数中使用它.当前上下文(this)可以分配给某个变量，例如self，并且可以在深层嵌套函数中的任何位置使用. this可能会更改，但是self将始终指向父级.

The first fix to keep the reference of this and use it inside the anonymous function. The current context (this) can be assigned to some variable say self and can be used anywhere in deep nested functions. this may change however self will always point to the parent.

   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

第二个选项是使用箭头功能.在箭头函数中，this始终指向调用它的上下文.这比修复1更好.

The second option is to use arrow function. In arrow function this always point to the context it is called from. This is better approach than fix 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"
        });
      }
    };

这篇关于属性"addToast"在类型"GlobalEventHandlers" angular 5上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！