ngFor alway returning id of first object in array

Question

I'm trying to get the ID of an object by assigning it to a variable declared in the component when a button is clicked. However, it seems to only be getting the first objects ID every time.

Here is a link to StackBlitz which replicates the issue I am having:

https://stackblitz.com/edit/angular-vcbzxf

Any assistance would be greatly appreciated.

I think it's the `bootstrap-model` that makes this quirk happen. I am new to angular myself, but I have done something on this stackblitz, hopefully this will help you find the right direction - https://stackblitz.com/edit/angular-ydtpdq Note that the `delete` button on dialog is not giving the expected result, but the `delete` button below the comment section probably does log expected id. — AD8, Jun 14 '18 at 07:34
Yeah it definitely has something to do with the modal. For some reason, the modal isn't able to view the value of the variable. It's such a simple thing, but also so frustrating! Thanks for your comment — Jono Lightning, Jun 14 '18 at 07:52
I would recommend having a look at other SO posts, probably google ‘angular bootstrap modal’, I’m unable to do a good search of this as I don’t have access to computer at the moment, but will do that once I get access to pc. — AD8, Jun 14 '18 at 07:54
Thanks, but I've decided to take a different UX approach that doesn't require the modal. I appreciate your effort :) — Jono Lightning, Jun 14 '18 at 08:34
Out of curiosity, are you going to integrate any other library? If you’re open to an idea of integrating third party library, I’d highly recommend looking up ‘devextreme’, devextreme’s popup are very identical to bootstrap modals and are very configurable. — AD8, Jun 14 '18 at 10:01
No I decided to delete a comment this way instead: https://stackblitz.com/edit/angular-vcbzxf Your input gave me the idea :D — Jono Lightning, Jun 14 '18 at 10:47
hey checkout the answer below if you want to go with bootstrap modals for 'delete confirmation'. — AD8, Jun 16 '18 at 02:40

score 2 · Accepted Answer · edited Nov 13 '18 at 01:32

Update 1 : You can actually achieve what you wanted using bootstrap modal with few changes like below.

comment.component.html:

<div *ngFor="let comment of post.comments; let i = index">

  {{ comment.content }}
  <button data-toggle="modal" [attr.data-target]="'#confirmDeleteCommentModal' + comment.id">Get ID</button>

    <div class="fade modal" [attr.id]="'confirmDeleteCommentModal' + comment.id" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteCommentModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteCommentModalLabel">Delete Comment</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" (click)="checkId(comment.id)">Delete</button>
                </div>
            </div>
        </div>
    </div>

</div>

Notice [attr.data-target]="'#confirmDeleteCommentModal' + comment.id" added to Get ID button and [attr.id]="'confirmDeleteCommentModal' + comment.id" which is added to bootstrap modal. Moreover, modal is now included in *ngFor div element.

Previously, data-target of Get ID button was always set to confirmDeleteCommentModal, and we technically just had one bootstrap modal with id set to confirmDeleteCommentModal, I think that is what caused the issue, we always loaded the same (and first) bootstrap modal.

Updated stackblitz: https://stackblitz.com/edit/angular-3tmtwa

Original answer (this did not solve the issue):

If you're going with per your most recent comment (as implemented here - https://stackblitz.com/edit/angular-vcbzxf), I would just like to point out that you could write your comment.component.html as follows:

comment.component.html

<div *ngFor="let comment of post.comments">
    <div>
        {{showDelete ? 'Are you sure you want to delete?' : comment.content + ' id = ' + comment.id}}
        <button *ngIf="showDelete" (click)="showDelete = false">Cancel</button>
        <button (click)="(showDelete == false && showDelete = true) || checkId(comment.id)">Delete</button>
    </div>
</div>

Stackblitz to give it a quick test : https://stackblitz.com/edit/angular-q27xn7

While this may not be a great improvement over what you've done, thought I would just point out other ways of achieving similar results.

ngFor alway returning id of first object in array

1 Answers1