Angular 9：在 ngFor 循环中使用模态

Question

I have a list of varieties generated by a for loop. Each item in that list has a button beside it so that particular list item can be updated. Each button will open up a modal where you can enter new informations. I don't want an unlimited amount of modals on the page, so I put the modal inside the for loop and want to pass the a iterator to the modal but always it displays the value 0 which is the first value of a.

<tr *ngFor="let a of list; ; let i=index" >
    <td> {{ i }} </td>
    <td> <button data-toggle="modal" data-target="#editproject">Update</button> </td>
    <div class="modal fade" id="editproject">
       <input type="text" id="edit-contact-name" class="form-control" placeholder="{{ a }}" >
    </div>
</tr>

Answer 1

I am not sure you can use {{}} inside input element. You can create a modal component. and pass the value of 'a' to the component as an attribute. <modal-component [a]="a"></modal-component>