wie man eine Daten in einem modalen mit Winkel 2 2

Question

anzeigen Ich habe eine Tabelle mit Taste. Was ich brauche ist, wenn ich auf den Knopf in der Tabelle klicke, eine modale Anzeige mit ihrem Wert. Mein Problem ist, wie Sie den Wert der Tabelle an das Modal übergeben. Kann jemand mir helfen, hier ist der Code

 <div style="margin-top: 50px" class="col-md-12"> 
     <div class="card"> 
      <div class="card-block"> 
      <div class="horizontal-scroll"> 
       <table class="table table-condensed"> 
       <thead> 
        <tr> 

        <th>Titre</th> 
        <th>Description</th> 
        <th>Durée (jours)</th> 
        <th>Coût (TalanCoin)</th> 
        <th>Action</th> 

        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let item of formations"> 

        <td>{{ item[1] }}</td> 
        <td style="margin-left: 4cm;"> 
         <button type="button" class="btn btn-info btn-icon" (click)="smModal.show()"><i class="ion-information"></i></button> 


         </td> 

        <td>{{ item[3] }}</td> 
        <td>{{ item[4] }}</td> 
        <td > 

         <button class="btn btn-success" (click)="clicked(item[4],lgModal)">Participer</button> 

        </td> 
        </tr> 
       </tbody> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 

    <!-- Small modal --> 
    <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" 
    role="dialog" aria-labelledby="mySmallModalLabel" aria- 
    hidden="true"> 

    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button class="close" aria-label="Close" 
      (click)="smModal.hide()"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
       <h4 class="modal-title">Description</h4> 
      </div> 
      <div class="modal-body" style="color: black;"> 
     <!--here I want to display the value selected from the table--> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-primary confirm-btn" 
     (click)="smModal.hide()">Save changes</button> 
     </div> 
</div> 

Answer 1

Sie eine Funktion in der Komponente machen könnte, die die modale wie folgt geöffnet:

... 
export class AppComponent {  
    @ViewChild('smModal') smModal; 
    currentItem; 
    ... 
    openModal(item: any) { 
    this.currentItem = item; 
    this.smModal.show(); 
    } 
} 

Dann statt smModal.show() können Sie rufen Sie openModal(item). Im Modal können Sie dann auf {{ currentItem }} auf die gleiche Weise zugreifen, auf die Sie in der Tabelle auf item zugreifen.