모달 박스가 내비게이션 탭 (부트 스트랩) 내에서 작동하지 않습니다

Question

많은 시간을 사용해 봤지만 아직 사용할 수 없으며 내비게이션 탭에 모달을 표시 할 수 없습니다. 그것을 클릭하면 흐림이 트리거됩니다. 누군가 나를 도울 수 있습니까? 이 코드를 시도하십시오

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

MY 템플릿,

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