当我们点击angular2中的链接时，如何在bootstrap模式中显示每个数据？

Question

我有一个表格列表。数据正在获取和列出。我添加了bootstrap模式，当我点击Booking number时，我需要显示带有一些数据的模态。已经提取了所有细节。我的问题是模态没有显示每个与预订号码相关的数据。如果我没有添加动态ID data-target="#myModal_{{booking._id}}" <div class="modal fade" id="myModal_{{booking._id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">，则模态仅显示未显示每个数据的单个数据。下面我分别添加了完整的代码和模态代码。

booking.component.html

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <ol class="breadcrumb">
    <li><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
    <li class="active">Bookings</li>
  </ol>
  <div class="panel panel-primary">
    <div class="panel-heading">Bookings</div>
    <div class="panel-body">
      <div class="table-responsive">
        <table class="table table-bordered table-hover display" id="dataTable" width="100%" cellspacing="0">
          <thead>
          <tr>
            <td class="no-sort">#</td>
            <th>Booking Number</th>
            <th>Email</th>
            <th>From</th>
            <th>To</th>
            <th>Beds</th>
            <th>Dorms</th>
            <th>Book Status</th>
            <th>Pay Status</th>
            <th>Payment Type</th>
            <th>Total Amount</th>
            <th>Tx id</th>
            <th class="no-sort">Actions</th>
          </tr>
          </thead>
          <tfoot>
          <tr>
            <td></td>
            <th>Booking Number</th>
            <th>Email</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <th>Payment Type</th>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          </tfoot>
          <tbody>
          <tr *ngFor="let booking of bookings; let i = index">
            <td><input type="checkbox"> {{ i }}</td>
            <td><a data-toggle="modal" data-target="#myModal_{{booking._id}}">{{booking.invoice_number}}</a></td>
            <!-- Modal begin -->
            <div class="modal fade" id="myModal_{{booking._id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <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" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    {{booking.cabinname}}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal end -->
            <td *ngIf="booking.usrEmail">{{booking.usrEmail}}</td>
            <td *ngIf="!booking.usrEmail"><span class="label label-default">No user</span></td>
            <td>{{booking.checkin_from | date:"dd.MM.yy"}}</td>
            <td>{{booking.reserve_to | date:"dd.MM.yy"}}</td>
            <td>{{booking.beds}}</td>
            <td>{{booking.dormitory}}</td>

            <!-- Booking status condition begin -->
            <td *ngIf="booking.status === '1'"><span class="label label-primary">New</span></td>
            <td *ngIf="booking.status === '2'"><span class="label label-warning">Cancelled</span></td>
            <td *ngIf="booking.status === '3'"><span class="label label-success">Completed</span></td>
            <td *ngIf="booking.status === '4'"><span class="label label-info">Request</span></td>
            <td *ngIf="booking.status === '5'"><span class="label label-danger">Failed</span></td>
            <td *ngIf="!booking.status"><span class="label label-default">No value</span></td>
            <!-- Booking status condition end -->

            <!-- Payment status condition begin-->
            <td *ngIf="booking.payment_status === '1'"><span class="label label-success">Done</span></td>
            <td *ngIf="booking.payment_status === '0'"><span class="label label-danger">Failed</span></td>
            <td *ngIf="!booking.payment_status"><span class="label label-default">No value</span></td>
            <!-- Payment status condition end-->

            <td>{{booking.payment_type}}</td>
            <td>{{booking.total_prepayment_amount}}</td>
            <td>{{booking.txid}}</td>
            <td><button class="btn btn-danger" type="submit">Delete</button></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- Export buttons are append here -->
    <div class="panel-body">
      <div id="buttons"></div>
    </div>

  </div>
</div>

模态部分

<td><a data-toggle="modal" data-target="#myModal_{{booking._id}}">{{booking.invoice_number}}</a></td>
            <!-- Modal begin -->
            <div class="modal fade" id="myModal_{{booking._id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <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" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    {{booking.cabinname}}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal end -->