Angular 6 - *ngFor 仅显示索引 0答案

【问题标题】：Angular 6 - *ngFor only showing index 0Angular 6 - *ngFor 仅显示索引 0
【发布时间】：2018-08-15 19:49:15
【问题描述】：

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

【问题讨论】：

您不想将*ngFor 放在tr 上而不是tbody 上吗？否则，您的表格将包含许多 tbody 元素

标签： angular ngfor

【解决方案1】：

您将所有div 命名为revokeModal。

尝试使用动态 id 名称

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

和

<div class="modal fade" [id]="'revokeModal' + act.Id"

【讨论】：