ポップアップモーダルブートストラップが角4で表示されない理由

Question

ポップアップモーダルがページに表示されない理由について誰でも助けてください。私はすでに自分のCLIにブートストラップをインストールしていますが、ポップアップは表示されません。以下のコードを別に設定する必要がありますか？私はbootstrap.min.jsがモーダル作品を作るものであることを信じて、私もそれを追加しましたが、まだそれは動作しません

//.angular-cli.json 

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "../node_modules/font-awesome/css/font-awesome.css", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 


//view.component.html 
<div id="container-wrapper"> 
<div class="container"> 
    <div class = "row"> 
     <div class = "col-md-3"></div> 
     <div class = "col-md-8 well"> 
      <h3 class="text-info">Account Information</h3> 
      <br> 
      <div class = "container-fluid">  
       <div class="table-responsive"> 
        <table class="table"> 
         <thead> 
          <tr> 
           <th>ID Number</th> 
           <th>Full Name</th> 
           <th>Email Address</th> 
           <th>Action</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr *ngFor="let account of accounts"> 
           <td>{{account.id}}</td> 
           <td>{{account.fullname}}</td> 
           <td>{{account.email}}</td> 
           <td> 
            <a class="teal-text" data-toggle="modal" data-target="#editmember"><i class="fa fa-pencil-square-o fa-lg"></i></a> 
            <a class="red-text"><i class="fa fa-times fa-lg"></i></a> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="editmember" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <form> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title text-info" id="myModalLabel">Edit Account Details</h4> 
        </div> 
        <div class="modal-body">  
         <div class = "form-group"> 
          <label>ID Number</label> 
          <input type = "number" class = "form-control"/> 
         </div> 
         <div class = "form-group"> 
          <label>Full Name</label> 
          <input type = "text" class = "form-control"/> 
         </div> 
         <div class = "form-group"> 
          <label>Email Address</label> 
          <input type = "email" class = "form-control"/> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-success" data-dismiss = "modal"><i class="fa fa-edit" aria-hidden="true"></i> Update</button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 

Answer 1

ブートストラップにより、デフォルトのモーダルを表示されません。 angleはjavascriptの代わりにtypescriptを使用するため、意図したとおりに使用します。モーダルのモジュールを提供するngx-bootstrapを見てみましょう：https://valor-software.com/ngx-bootstrap/#/。私はそれを使ったプロジェクトでそれを使用しました。

Answer 2

まずはから"../node_modules/bootstrap/dist/js/bootstrap.min.js"はないstyles: []セクション、scripts: []セクションの下に行く必要があります。

第2の - Angularのブートストラップラッパーであるhttps://github.com/valor-software/ngx-bootstrapを調べることをおすすめします。 Angularアプリケーションとの統合が容易になります。