Twitter bootstrap 使用引导以角度2显示模式
需求是使用NGO获取列表,单击选项卡显示引导模式,但列表中的每个模式id都是相同的,导致每个模式的内容都是第一次面试,现在的想法是进入索引,索引将传递到id。现在的问题是如何传递到索引中,这个想法正确吗Twitter bootstrap 使用引导以角度2显示模式,twitter-bootstrap,angular,Twitter Bootstrap,Angular,需求是使用NGO获取列表,单击选项卡显示引导模式,但列表中的每个模式id都是相同的,导致每个模式的内容都是第一次面试,现在的想法是进入索引,索引将传递到id。现在的问题是如何传递到索引中,这个想法正确吗 <tr *ngFor="let interview of interviews; let i = index" role="row" class="gradeA"> <td class="col-sm-2" style="text-align: left;">{{
<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">×</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>
{{interview.company.name}
{{采访.邀请者.真实姓名}
未知
{{采访.被采访者.真实姓名}
短信
&时代;
通知内容
公司名称: {{interview.company.name}
面试官: {{采访.邀请者.真实姓名}
应聘者: {{采访.被采访者.真实姓名}
通知内容: {{采访.通知内容}
我们可以使用此解决方案,只需创建一个对话框弹出窗口并将其传递给selectedInterview对象
selectedInterview: any;
showPopup(interviewObj) {
this.selectedInterview = interviewObj;
}
我们将模板分为两部分,一部分用于循环面试,一部分用于对话框弹出
<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>
{{interview.company.name}
{{采访.邀请者.真实姓名}
未知
{{采访.被采访者.真实姓名}
短信
请注意:ng container检查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">×</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>
&时代;
通知内容
公司名称: {{selectedInterview.company.name}
面试官: {{selectedInterview.inviter.real_name}
应聘者: {{selectedInterview.interviewer.real_name}
通知内容: {{selectedInterview.notice_content}
谢谢。但它不起作用。我认为(单击)=“显示弹出窗口(面试)”和数据目标=“模式”冲突。。。