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

问题描述

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

addToast(options): any {如果(options.closeOther){this.toastyService.clearAll();}this.position = options.position ?options.position : this.position;const toastOptions: ToastOptions = {标题:options.title，味精:选项.味精，showClose: options.showClose,超时:options.timeout，主题:options.theme，onAdd: (toast: ToastData) =>{/* 添加 */},onRemove: (toast: ToastData) =>{/* 删除 */}};开关(选项.类型){案例默认":this.toastyService.default(toastOptions);休息;案例信息":this.toastyService.info(toastOptions);休息;案例成功":this.toastyService.success(toastOptions);休息;案例等待":this.toastyService.wait(toastOptions);休息;案例错误":this.toastyService.error(toastOptions);休息;案例警告":this.toastyService.warning(toastOptions);休息;}}

我尝试将此方法用于另一种称为onLoadFile"的方法.这是这样的:-

onLoadFile(event) {var img = new Image();img.src = event.target.result;var isUploadPic = null;img.onload = function(): 任何 {console.log(img.width, "x", img.height);//var isUploaded = false;if (img.width != 600 && img.height != 600) {this.addToast({title: "失败！",msg: "尺寸应为 600x600.",超时:6000，主题:默认"，位置:右上角"，类型:错误"});}};console.log(isUploadPic);}

但它在 VSCODE 上向我显示了一个错误，即属性 'addToast' 在类型 'GlobalEventHandlers' 上不存在".我正在分享一张照片.

而且我正在分享控制台错误的图像.这是下面.

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

解决方案

Issue

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

修复

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

<块引用>

修复 1

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

 let self = this;img.onload = function(): 任何 {console.log(img.width, "x", img.height);//var isUploaded = false;if (img.width != 600 && img.height != 600) {self.addToast({title: "失败！",msg: "尺寸应为 600x600.",超时:6000，主题:默认"，位置:右上角"，类型:错误"});}};

<块引用>

修复 2

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

img.onload = () =>{console.log(img.width, "x", img.height);//var isUploaded = false;if (img.width != 600 && img.height != 600) {this.addToast({title: "失败！",msg: "尺寸应为 600x600.",超时:6000，主题:默认"，位置:右上角"，类型:错误"});}};

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;
}


}

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);


  } 

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.

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

解决方案

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.

Fix

You have two options to fix this issue

Fix 1

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"
            });
          }
        };

Fix 2

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屋！