时间戳

首页 > 解决方案 > jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker 不是函数

jquery - jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker 不是函数

问题描述

我正在使用 Angular 6。我已经提到了所有相关的问题，但没有一个解决了我的问题，因此我提出了这个问题。

我按照“ https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0 ”中给出的步骤将 datePicker 添加到我的 ag-grid cellEditor 中。

首先，它给了我一个错误，说“$ 未定义”，这是通过安装 jquery 和相关库并添加“import * as $ from 'jquery';”解决的。到我的组件 ts 文件。

现在，当 ag-grid 加载时，如果我单击 datepicker 单元格进行编辑，我会收到以下错误

core.js:1673 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function
    at Datepicker.init (dashboard.component.ts:875)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.initComponent (ag-grid-community.cjs.js:14369)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.createAndInitUserComponent (ag-grid-community.cjs.js:14123)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.newCellEditor (ag-grid-community.cjs.js:14057)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.createCellEditor (ag-grid-community.cjs.js:19053)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.startEditingIfEnabled (ag-grid-community.cjs.js:19042)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.startRowOrCellEdit (ag-grid-community.cjs.js:19019)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.onCellDoubleClicked (ag-grid-community.cjs.js:19010)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.onMouseEvent (ag-grid-community.cjs.js:18947)
    at GridPanel.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.GridPanel.processMouseEvent (ag-grid-community.cjs.js:27411)

标签： jqueryangularag-grid

解决方案

我遇到过同样的问题。我知道这是一个老问题。但它可能会帮助其他一些人。

最近我们从 AG9 升级到 AG10。但这与这个问题无关（仅供参考）。即使在安装了“@types/jquery”之后，我也通过手动将“jquery”和“jquery-ui”文件放入 assets 文件夹中解决了这个问题。

我遵循的程序是：

第1步：

npm install --save @types/jquery

第2步：

将 jquery 添加到 tsconfig.app.json 中的类型

"types": [
  "jquery"
]

第三步：

将 jquery、jquery-ui 文件夹添加到资产/脚本或您喜欢的任何文件夹

第4步：

在 angular.json 中添加 Jquery 引用 例如：

"styles": [
          "src/assets/scripts/jquery-ui/jquery-ui.css",
          .....,
          .....,
        ],
"scripts": [
          "src/assets/scripts/jquery/jquery-3.2.1.min.js",
          "src/assets/scripts/jquery-ui/jquery-ui.js"
        ],

第五步：

这是最重要的方面。重新启动 IDE/编辑器。我有 VS Code，我必须重新启动它才能工作。

使用这种方法，您可以使日期选择器工作。

注意：我在 Ag Grid 中使用了日期选择器。为此，我必须遵循这个程序。

推荐阅读