Estoy tratando de crear un modal para cada uno de los datos enviados en el siguiente ciclo:
<tbody class="font-size-base">
<tr *ngFor="let item of contacto | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>
{{item.cliente}}
<td>
{{item.correo}}
</td>
<td>
{{item.telefono}}
</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + item._id">
Launch demo modal
</button>
</td>
<div class="modal fade" id="{{item._id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
Sin embargo, aunque el botón que ejecuta el modal y el modal, terminan recibiendo la misma id:
Botón para ejecutar el modal con el atributo data-target:
<button _ngcontent-eoq-c127="" type="button" data-toggle="modal" class="btn btn-primary"
data-target="#62dee4261fa4460bf07a6e6e"> Launch demo modal </button>
Contenido del modal con el id igual al data target mencionado:
<div _ngcontent-eoq-c127="" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade" id="62dee4261fa4460bf07a6e6e">
El modal directamente NO se abre, NO ejecuta en absoluto:
¿Qué podría ser? Por qué mi modal no se abre? He revisado bien las librerías e intentar abrirlo cambiando el datatarget y el ID por palabras simples como "Modal" y en ese caso funciona a la perfección ¡¿Que está mal?!