使用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>