Angular 6 - *ngFor only showing index 0

Question

I've created an app where User A with x permissions can receive a JWT to use in future requests. Each JWT last for 15 minutes before expiring. Another User B with y permissions has the ability to see each JWT that is currently active and valid, and has the ability to revoke them. I've done this by creating a table and utilizing *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" is a string array containing an ID, a JWT, an issuing date and an expiry date.

The page displays properly, with the correct ID, issuing date and expiry date showing for each token in the table. Clicking the revoke button uses the JWT at index 0, and clicking any of the view token buttons displays the JWT at index 0. Why is this? Is it possible to display the correct JWT using just html?

Answer 1

You name revokeModal for all your div.

Try to have dynamic id names

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

and

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