показывается модал но я не могу его редактировать - PullRequest
Новая
       13

показывается модал но я не могу его редактировать

1 голос
/ 16 апреля 2019

привет, я новичок в bootstrap и angular 7, я разрабатываю веб-сайт, который содержит кнопку, когда вы нажимаете на нее модальное всплывающее окно с помощью руководства по начальной загрузке , которое я пытался сделать, так какВы можете видеть, что в примере работает нормально, но когда я попытался использовать его в моем приложении, он не работал должным образом, модель показывает нормально, но я не могу отредактировать любое поле на нем или нажать любую кнопку, как вы можете видеть в картинка и я получаю эту ошибку 

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

<button class="btn  ajouter" id="ajoutbtn" style="color: white ;background: #4183c4"  data-toggle="modal" data-target="#ajoutModal">ajouter</button>
<!-- Modal ajout -->
<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 компонент 

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

, и я добавил это в свой файл .ts 

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