Having trouble transferring values between components? I'm currently dealing with a situation involving two components: report-form and comment-form. The report form contains an array of comments, displaying a list of comments and a button for each one. When the button is clicked, it should load a modal form with the @Input property commentIndex. However, the problem lies in the fact that the report-form component is only sending the first value from the array to the comment-form. I'm completely stumped as to why this is happening :/.
Check out some code:
Snippet from report-form.html:
<div class="form-group row">
<div class="col-md-12 alert alert-dark">Comments:</div>
<div class="col-md-12" *ngFor="let comment of comments">{{ comment.content }}
<app-comment-form [commentIndex]="comments.indexOf(comment)"></app-comment-form>
</div>
<br>
<app-comment-form></app-comment-form>
</div>
When I check the console output in the comment-form, I see 1 and 2 in the 3-element array, but where's 0?!