使用bootstrap在angular2中显示模态

Question

需求是使用ngFor获取列表，单击选项卡以显示引导模式，但每个模式ID在列表中相同，导致每个模态的内容是第一次采访，现在的想法是获得索引，并将索引传递给id。现在的问题是如何进入索引，这个想法是正确的？

<tr *ngFor="let interview of interviews; let i = index" role="row" class="gradeA"> 
    <td class="col-sm-2" style="text-align: left;">{{ interview.company.name }}</td> 
    <td class="col-sm-1" style="text-align: left;">{{ interview.inviter.real_name }}</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id==0">未知</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id!=0">{{ interview.interviewee.real_name }}</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==0"> 
    <a data-toggle="modal" data-target="modal">短信</a> 
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog"> 
      <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">通知内容</h4> 
       </div> 
      <div class="modal-body"> 
       <span style="font-weight:bold;">公司名称：</span><p>{{ interview.company.name }}</p> 
       <span style="font-weight:bold;">面试官：</span><p>{{ interview.inviter.real_name }}</p> 
       <span style="font-weight:bold;">应聘者：</span><p>{{ interview.interviewee.real_name }}</p> 
       <span style="font-weight:bold;">通知内容：</span><p>{{ interview.notice_content }}</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </td> 

Answer 1

我们可以用这个解决方案的方法，只需要创建1对话框弹出，并通过它selectedInterview对象。

selectedInterview: any; 
showPopup(interviewObj) { 
    this.selectedInterview = interviewObj; 
} 

我们单独的模板分为两个部分，1环的采访和1对话框弹出

<tr *ngFor="let interview of interviews; let i = index" role="row" class="gradeA"> 
    <td class="col-sm-2" style="text-align: left;">{{ interview.company.name }}</td> 
    <td class="col-sm-1" style="text-align: left;">{{ interview.inviter.real_name }}</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id==0">未知</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id!=0">{{ interview.interviewee.real_name }}</td> 
    <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==0"> 
    <a data-toggle="modal" (click)="showPopup(interview)" data-target="modal">短信</a> 
</td> 

需要注意的是：NG-容器检查，如果selectedInterview未定义在弹出显示

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog"> 
    <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">通知内容</h4> 
     </div> 
     <div class="modal-body"> 
     <ng-container *ngIf="selectedInterview !== undefined"> 
      <span style="font-weight:bold;">公司名称：</span><p>{{ selectedInterview.company.name }}</p> 
      <span style="font-weight:bold;">面试官：</span><p>{{ selectedInterview.inviter.real_name }}</p> 
      <span style="font-weight:bold;">应聘者：</span><p>{{ selectedInterview.interviewee.real_name }}</p> 
      <span style="font-weight:bold;">通知内容：</span><p>{{ selectedInterview.notice_content }}</p> 
     </ng-container> 
     </div> 
    </div> 
    </div> 
</div>