我已经创建了一个应用程序,其中具有x权限的用户A可以接收一个JWT,以便在将来的请求中使用。每个JWT在过期前持续15分钟。具有y权限的另一个用户B能够查看当前活动和有效的每个JWT,并能够撤销它们。我已经创建了一个表并使用*ngFor:
<tbody *ngFor="let act of active; let i = index">
<tr>
<th scope="row">{{ i + 1 }}</th>
<td>{{ act.id }}</td>
<td>{{ act.issuedAt }}</td>
<td>{{ act.expiresAt }}</td>
<div class="buttonHolder">
<button class="btn btn-default" data-toggle="modal" data-target="#jwtModal" role="button">View Token</button>
</div>
<div class="modal fade" id="jwtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
{{ act.jwt }}
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<td></td>
<button class="btn btn-inverse" data-toggle="modal" data-target="#revokeModal" role="button">Revoke</button>
<div class="modal fade" id="revokeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h2 id="modalText">Revoke token?</h2>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-inverse" (click)="revokeJWT(act.jwt)" role="button" data-dismiss="modal">Revoke</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
active是一个字符串数组,包含ID、JWT、发行日期和到期日期。
页面将正确显示,并在表中显示每个令牌的正确ID、颁发日期和到期日期。单击revoke按钮将使用索引0处的JWT,单击任何视图标记按钮将显示索引0处的JWT。为什么会这样呢?仅仅使用html就可以显示正确的JWT吗?
发布于 2018-08-16 04:05:40
您为所有的div
命名为revokeModal
。
尝试使用动态id名称
[data-target]="'#revokeModal' + act.Id"
和
<div class="modal fade" [id]="'revokeModal' + act.Id"
https://stackoverflow.com/questions/51865470
复制相似问题