Warum PopUp Modal Bootstrap nicht im Winkel erscheint 4

Question

Kann mir jemand helfen, warum mein Popup-Modal nicht in der Seite erscheint. Ich habe Bootstrap bereits in meinem CLI installiert und zeige immer noch kein Popup. Gibt es etwas, das du neben meinen Codes konfigurieren musst? Ich glaube, dass bootstrap.min.js ist, was die modalen Arbeiten macht und ich fügte hinzu, es auch, aber noch ist es nicht angezeigt

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

Die Standard-modal durch Bootstrap nicht funktioniert wie beabsichtigt, weil eckig anstelle von Javascript Typoskript verwendet. Werfen Sie einen Blick auf ngx-bootstrap, das ein Modul für Modale bietet: https://valor-software.com/ngx-bootstrap/#/. Ich habe es in einem Projekt verwendet, an dem ich gearbeitet habe, und es funktioniert gut mit eckigen.

Answer 2

First off-"../node_modules/bootstrap/dist/js/bootstrap.min.js" sollte unter dem scripts: [] Abschnitt gehen, nicht der styles: [] Abschnitt.

Zweite - Ich empfehle in https://github.com/valor-software/ngx-bootstrap suchen, die ein Bootstrap Wrapper für Angular ist. Es erleichtert die Integration in Ihre Angular-Anwendung.