首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 6- *ngFor仅显示索引0

Angular 6- *ngFor仅显示索引0
EN

Stack Overflow用户
提问于 2018-08-16 03:49:15
回答 1查看 462关注 0票数 0

我已经创建了一个应用程序,其中具有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吗?

EN

回答 1

Stack Overflow用户

发布于 2018-08-16 04:05:40

您为所有的div命名为revokeModal

尝试使用动态id名称

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

<div class="modal fade" [id]="'revokeModal' + act.Id"
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51865470

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档