Question

我创建了一个应用，其中具有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>

“活动”是一个包含ID，JWT，发行日期和到期日期的字符串数组。

该页面正确显示，并为表中的每个令牌显示正确的ID，发行日期和到期日期。单击撤消按钮将使用索引为0的JWT，单击任何视图标记按钮将显示索引为0的JWT。这是为什么？是否可以仅使用html来显示正确的JWT？

Answer 1

您为所有composer dump-autoload命名revokeModal。

尝试使用动态ID名称

div

和

[data-target]="'#revokeModal' + act.Id"

角度6-* ng仅显示索引0

1 个答案: