从Angular 4中的数据表填充模态

Question

我正在尝试为表格中的每一行弹出一个模式。 这是我的HTML

 <table class="table">
       <thead>
           <tr>
            <th *ngFor="let column of columns">
                {{column}}
            </th>
       `    <th><p style="float:right;">Action</p></th>
           </tr>
       </thead>
       <tbody>
       <tr *ngFor="let char of characters | filter: searchText | paginate: { id: 'listing_pagination', itemsPerPage: 5, currentPage: page, totalItems: totalRec } "  >
             <td *ngFor="let column of columns" >
              {{char[column]}}
             </td>
             <td style="float:right">
             <a class="btn btn-xs new-Window" ng-click="function(char)" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-new-window"></i></a>
             </td>
      </tr>
      </tbody>

这是我的模态：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
     <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">×   </span><span class="sr-only">Close</span>                    
         </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>         
         </div>
        <div class="modal-body"></div>
         <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Back To List</button>
     </div>
    </div>
   </div>
 </div>

下面是我正在使用的JavaScript：

    $(".btn[data-target='#myModal']").click(function() {
        var columnHeadings = $("thead th").map(function() {
                  return $(this).text();
               }).get();
        columnHeadings.pop();
        var columnValues = $(this).parent().siblings().map(function() {
                  return $(this).text();
        }).get();
    var modalBody = $('<div id="modalContent"></div>');
    var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
    $.each(columnHeadings, function(i, columnHeader) {
        var formGroup = $('<div class="form-group"></div>');
        formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
        formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />'); 
        modalForm.append(formGroup);
    });
    modalBody.append(modalForm);
    $('.modal-body').html(modalBody);
    });
    $('.modal-footer .btn-primary').click(function() {
    $('form[name="modalForm"]').submit();
    });

当我单击glyphicon时，什么都没有发生？我认为问题出在HTML中的功能以及在JavaScript中定义的方式，但我无法弄清楚。