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

jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function

我正在使用 Angular 6. 我已经提到了所有与此相关的问题,其中 none 解决了我的问题,因此我提出了这个问题。

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

首先它给了我一个错误说“$ is not defined”,通过安装 jquery 和相关库并在我的组件 ts 文件中添加 "import * as $ from 'jquery';" 解决了这个问题。

现在,当加载 ag-grid 时,如果我单击日期选择器 Cell 对其进行编辑,我会收到以下错误

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)

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

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

我遵循的程序是:

第一步:

npm install --save @types/jquery

第 2 步:

在 tsconfig.app.json

中添加 jquery
"types": [
  "jquery"
]

第 3 步:

将 jquery、jquery-ui 文件夹添加到 assets/scripts 或您喜欢的任何文件夹

第四步:

在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中使用了日期选择器。为此,我必须遵循此程序。