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; 
} 

私たちは、ダイアログポップアップのために2部、ループのインタビューのための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>