Bootstrap 4 模态显示，但我无法编辑它

嗨，我是bootstrap和angular 7的新手，我正在开发一个网站，当你点击它时，它包含一个按钮，一个模式弹出窗口，借助于bootstrap，我试着这样做，正如您在示例中所看到的，工作正常，但当我尝试在我的应用程序中使用它时，它无法正常工作模型显示正常，但我无法编辑其上的任何字段或按任何按钮，如您在中所看到的，我收到此错误

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).modal is not a function
    at HTMLButtonElement.<anonymous> (cadre-vague.component.ts:16)
    at HTMLButtonElement.dispatch (jquery.js:5233)
    at HTMLButtonElement.elemData.handle (jquery.js:5040)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)

我把这个添加到了我的.ts文件中

ngOnInit() {
    $('document').ready(function() {
      $('#ajoutbtn').click(function() {
        $('#ajoutModal').modal('show');
      });
    });  }

---

我想这个链接会帮助你谢谢你我已经看到了。。这似乎是动画的一个问题，因为当我删除它时，模态工作我想这个链接会帮助你谢谢你，我已经看到了。。这似乎是动画的一个问题，因为当我删除它时，模态工作

<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="ajoutmodel">Ajouter un nouveau cadre vague :</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form class="form justify-content-between">
     <div class="row">
       <div class="col-sm-6">
      <div class="form-group">
        <label >vague:</label>  <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >Reference CUI:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >Coordonnées poste insertion manuelle:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >temps de cylcle:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>
       </div>
       <div class="col-sm-6">
      <div class="form-group">
        <label >Tag RFID:</label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label ></label>
        <input type="text" class="bg-transparent border bord form-control" >
      </div>

      <div class="form-group">
        <label >produit:</label>
        <select class="form-control bg-transparent" #value id="sdept" name="deplist" (click)="ajouter(value.value)" >
          <option>prod1</option>
          <option>prod2</option>
          <option>prod2</option>
          <option>Ajouter</option>
        </select>      </div>

      <div  [hidden]="value.value!='Ajouter'" >
        <div class="form-group">
          <label >nouveau produit :</label>
          <input type="text" class="bg-transparent border bord form-control" >
        </div>

      </div>
       </div>

     </div>
    </form>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
    <button type="button" class="btn btn-primary">Enregistrer </button>
  </div>
</div>

ngOnInit() {
    $('document').ready(function() {
      $('#ajoutbtn').click(function() {
        $('#ajoutModal').modal('show');
      });
    });  }