Question

您好，我是Bootstrap和angular 7的新手，我正在开发一个网站，其中包含一个按钮，当您单击Bootstrap guide时，我尝试这样做，它包含一个模式弹出窗口，您可以在示例中看到效果很好，但是当我尝试在应用程序中使用它时，模型无法正常显示，但是我无法编辑它的任何字段或按下任何按钮，就像在picture中看到的那样而我收到此错误

app

我试图自行修复，但失败了，所以我寻求您的帮助这是我的代码：

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)

这是 <button class="btn ajouter" id="ajoutbtn" style="color: white ;background: #4183c4" data-toggle="modal" data-target="#ajoutModal">ajouter</button>  <div class="modal fade" id="ajoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <app-ajout></app-ajout> </div> </div>组件

ajout

并将其添加到我的.ts文件

<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>

模态显示，但我不能编辑它

0 个答案: