Angular6类型的“ JQuery”上不存在属性“ modal”

Question

我在TypeScript Angular6中使用jQuery时出现以下错误，请帮我

jQuery('#assignsp').modal('show');

遵循这些步骤

3个步骤：

安装jQuery。（如果已安装，请跳过）

npm install jquery --save jQuery的安装类型。

npm install @ types / jquery-保存

Import jQuery in app.module.ts.

import * as $ from 'jquery';

它告诉我错误

错误TS2339：类型“”上不存在属性“模式”JQuery<HTMLElement>

错误TS2339：类型“ JQuery”上不存在属性“模式”。

Answer 1

您尝试同时执行多项操作。首先，您需要将jQuery与Typescript集成在一起，其次，集成引导程序模态功能，该功能最终会依赖jQuery。让我们先集成jQuery，然后跳转到引导程序。

jQuery安装：您已经在这里做了很多事情

npm install jquery --save

npm install @types/jquery --save

npm i bootstrap --save

角度配置：在此处输入jQuery和引导程序：

"styles":[
           "src/styles.css",
            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
         ],
"scripts":[
            "./node_modules/jquery/dist/jquery.min.js",
             "./node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

打字稿配置：将此行添加到组件顶部。

/// <reference path ="../../node_modules/@types/jquery/index.d.ts"/>
declare var $: any 
ngOnInit() {
    $('#myModal').modal('show');
}

HTML：在此处添加模式代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Modal</h4>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我已经尝试了上述方法，并且对我有用。让我知道您是否仍然遇到错误。