Question

我有一张带按钮的桌子。我需要的是当我点击表格中的按钮时，它的值为模态显示。我的问题是如何将表的值传递给模态。任何人都可以帮助我，这是代码

      <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

您可以在组件中创建一个函数，打开模态，如下所示：

var client = new WindowsAzure.MobileServiceClient('https://mysite.azurewebsites.net');
client.login('facebook', $scope.token).done(function (result) {
    ......

然后您可以拨打... export class AppComponent { @ViewChild('smModal') smModal; currentItem; ... openModal(item: any) { this.currentItem = item; this.smModal.show(); } }而不是smModal.show()。在模式中，您可以像访问表格中的openModal(item)一样访问{{ currentItem }}。

如何使用角度2在模态中显示数据

1 个答案: