モーダルボックスがnavbarタブ（ブートストラップ）内で動作しない

Question

私は多くの時間を費やしていますが、まだ使用していません。私はモーダルをnavbarタブに表示できません。それをクリックすると、ぼかしがトリガーされます。誰か助けてくれますか？

MYテンプレート、

addnewrecord() { 
    $('#editmodel').modal('show'); 
} 

<div class="col-xs-12"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="tabbable tabs-left mb-lg"> 
     <ul id="tabs2" class="nav nav-tabs"> 
      <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Home</a> 
      </li> 
      <li class="nav-item"><a class="nav-link active" [routerLink]="['/app/tables/basic']" data-toggle="tab">Chatter</a> 
      </li> 
     </ul> 
     <div id="tabs2c" class="tab-content bg-info-light"> 
      <div class="tab-pane active"> 
      <div class="page-title"> 
       <div class="btn-group"> 
       <button class="btn btn-sm btn-default" (click)='addnewrecord()'> 
        New 
       </button> 
       </div> 
      </div> 

      <div class="modal fade" id="editmodel" role="dialog"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <div class="modal-body"> 
         <form id='form' class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false" novalidate="novalidate"> 
         <div class="form-group"> 
          <label for="email">FirstName:</label> 
          <input type="text" [(ngModel)]='student.accountname' name='accountname' class="form-control" id="email" placeholder="Enter Firstname" required='required'> 
         </div> 
         <button type="submit" class="btn btn-primary" (click)='insertdata(student,student._id)'>{{buttonname}}</button> 
         </form> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal" (click)='resetform()'>Close</button> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

Answer 1

$('#editmodel').show();