.net core angular 4 application jquery grid'document is not defined'错误——

Question

在这种情况下需要一些帮助。

尝试在 .net 核心 Angular 应用程序中使用名为 gijgo 的基于 jquery 的网格。在开始之前，我研究了 Internet 上的一些可用示例，主要是 mvc5。我通过添加 npm 包、编写一些标记来尝试我的一点。现在，当我启动应用程序时。我收到一个错误，主要是说 - 文档未定义。我猜这与添加+引用jquery lib有关。在我的应用程序中不正确。我不确定，因为我对 Angular 应用程序非常陌生。这是我做的一些代码：：

product.component html --

    <div class="h2">Products</div>
<br />


<div id="productSection">
    <div class="gj-margin-top-10">
        <table id="grid">

        </table>
    </div> 
</div>

product.component TS --

import { Component, OnInit, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { PlatformLocation } from '@angular/common';
import { Credentials } from '../../shared/models/credentials.interface';
import { CommonFunctionsService } from "../../shared/services/common.functions.service";
import { AppService } from "../../shared/services/AppService";
import { UserStore, IUserStore } from "../../shared/models/store.interface";
import { IStandardResponse } from "../../shared/models/standardresponse.interface";
import * as $ from 'jquery';


@Component({
    selector: 'products',
    templateUrl: './product.component.html'

})

export class ProductsComponent implements OnInit, OnDestroy
{
    constructor(private router: Router, private common: CommonFunctionsService, private appSrvc: AppService, private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        // subscribe to router event
        $(document).ready(function () {
            var grid = $('#grid').grid({      **<-------- error here property grid does not exist on type jquery<HtmlElement>**
                primaryKey: 'ProdID',
                dataSource: '/Home/GetStoreProducts',
                columns: [
                    { field: 'ProdID', hidden: true },
                    { field: 'Name', sortable: true },
                    { field: 'Price', sortable: true },
                    {
                        width: 64,
                        tmpl: '<span class="material-icons gj-cursor-pointer">View Details</span>',
                        align: 'center',
                        events: { 'click': ProductDetails }
                    },
                    {
                        width: 64,
                        tmpl: '<span class="material-icons gj-cursor-pointer">Edit</span>',
                        align: 'center',
                        events: { 'click': Edit }
                    }
                ],
                pager: { limit: 10 }
            });
        });

    }

    ngOnDestroy() {
        // prevent memory leak by unsubscribing

    }
}

bower.json --

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.6",
    "jquery": "2.2.0",
    "gijgo": "1.7.3",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  },
  "resolutions": {
    "jquery": ">= 1.7.2"
  }
}

和 package.json --

{
  "name": "CoreRIA_Web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
"dependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/webpack-env": "1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
  }
}

为了解决这个问题，我尝试了其他一些试错方法。就像在脚本部分中的 html 文件本身中编写 jquery 代码一样， 在 TS 组件代码中添加 declare var $:any 等。没有成功，同样的错误出现了。什么是要做？如何解决这个问题？你能告诉我一个如何正确地解决这个问题的方法吗？期待一些指导， 非常感谢，

Answer 1

我们有一个示例，它已经在http://gijgo.com/grid/demos/angular-6 进行了配置

Answer 2

为了正确使用 jquery，您应该为此安装类型。

npm install --save @types/jquery

安装类型后，将 jquery 导入更改为：

import 'jquery'

现在您应该使用 any 类型包装您的 $(something) 调用。像这样：

(<any>$(document)).ready(function ()...

或

(<any>$('#grid')).grid(...