2017-06-06 97 views
0

當我打開窗口時,頁面變寬,我認爲這是滾動條的問題,你能告訴我如何在angular2中解決嗎?在angular2中使用bootstrap模態時,關閉模態會抖動

它是一個列表:

<tbody> 
    <tr *ngFor="let interview of interviews;" 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" (click)="showModal(interview)">短信</a> 
     </td> 
     <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==1"> 
     <a data-toggle="modal" data-target="#modal" (click)="showModal(interview)">郵件</a> 
     </td> 
     <td class="col-sm-1" style="text-align: left;">{{ interview.interview_time }}</td> 
     <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==0">發起面試</td> 
     <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==1">確認面試時間</td> 
     <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==2">面試完成</td> 
     <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==3">面試者沒有參加面試</td> 
    </tr> 
</tbody> 

模態:

<div class="modal fade" id="modal" 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">通知內容</h4> 
     </div> 
     <div class="modal-body" *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> 
     </div> 
    </div> 
    </div> 
</div> 

的ShowModal方法:

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

回答

1

這不是Angular問題,其CSS問題。試着給父div一些寬度。如果你可以分享你的代碼,那麼解決這個問題會更容易。

+0

嗨,我現在推我的代碼 – zhongshankaka