我该如何解决错误 "TS2339: Property 'gauge' does not exist on type 'JQuery<HTMLElement>'."

Question

我正在开发一个离子（版本 4）应用程序，我想实现一个自定义仪表。

因为，我是 jQuery 的新手，我不确定这个错误到底是什么意思。

我正在使用 jQuery 插件 jquery-gauge.min.js，其中包含如下所示的方法 gauge()，它在任何 Web 应用程序中都可以正常工作。

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  ngOnInit(): void {
    $('.gauge1').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#1aff1a',
        75.5: '#1aff1a',
        75.6: '#515e80',
        80: "#515e80",
        90: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 75.5
    });
  }
}

当我在离子应用程序上实现它时，它在 $('.gauge').gauge({...})

行抛出错误

error "TS2339: Property 'gauge' does not exist on type 'JQuery'

我已将 jquery-gauge.min.js 添加到 angular.json 文件中的脚本中。

我该如何解决这个错误？

Answer 1

可能是因为此函数是在 javascript 加载您的仪表功能之前执行的。

尝试使用 ngAfterViewChecked() 生命周期挂钩而不是 ngOnInit()。

Answer 2

在导入语句之后添加这个

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

declare interface JQuery<HTMLElement> {
 gauge(...args): any;
}
...

Answer 3

找到解决方案。

使用jQuery('.gauge1').guage()代替$('.gauge1').guage()

虽然我是 jQuery 的新手，但我不知道插件在不同平台上的行为可能有何不同（不知道为什么会这样）但是，当我在 .js 中使用插件时文件在网络应用程序中使用 $('.guage').gauge() 工作，但是当我将它与离子一起使用（或者应该说与 .ts 文件一起使用）时，它需要 jQuery('.guage').guage() 而不是。

如果有人能解释为什么会这样。那也会很感激和有帮助。

谢谢。

我该如何解决错误 "TS2339: Property 'gauge' does not exist on type 'JQuery<HTMLElement>'."

How do I resolve error "TS2339: Property 'gauge' does not exist on type 'JQuery<HTMLElement>'."

javascript

jquery

typescript

angular

ionic4