0

En mi component.html. Estoy intentando crear un botón que muestre el texto de cada publicación con modal pero cuando le pongo el id con cada publicación me aparece.

introducir la descripción de la imagen aquí

Y este es el codigo

<div *ngIf="publication.user._id == identity._id">
    <button class="btn btn-danger"  data-toggle="modal"
    data-target="#myModal{{publication._id}}">
        <fa-icon icon="trash"></fa-icon>
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal{{publication._id}}" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Borrar Publicacion</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                <p>Estas seguro de que quieres borrar la publicacion?</p>
                <p>{{publication.text}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-danger">Borrar</button>
                </div>
            </div>
        </div>
    </div>

</div>

El problema parece ser cuando le coloco el id al modal con el id de la publicación. Pero si no lo coloco solo me aparece la de la primera publicación.

8
  • Prueba con [attr.data-target]="'#tuId" Commented el 23 abr. 2019 a las 0:31
  • Ahora aparece Got interpolation ({{}}) where expression was expected at column 5 in [#myId{{publication._id}}]
    – Alezco05
    Commented el 23 abr. 2019 a las 16:40
  • 1
    La sintaxis debería ser [attr.data-target]="'#' + id", ya que no se pueden utilizar parentésis en este caso Commented el 24 abr. 2019 a las 4:25
  • Lo puse [attr.data-target]="'#' + publication._id" en el button y al modal id="publication._id". Asi esta bien la sintaxis? Por que ahora me aparece Failed to execute 'querySelector' on 'Document': '#5cc067ec2bc893221479f3a7' is not a valid selector
    – Alezco05
    Commented el 24 abr. 2019 a las 13:45
  • No, en el modal debería ir con las llaves correspondientes Commented el 24 abr. 2019 a las 15:02

1 respuesta 1

4

En angular las variables para los atributos se concatenan sin las llaves {{}}.

<button class="btn btn-danger" [attr.data-toggle]="modal" [attr.data-target]="'#myModal'+publication._id">

Luego al id si se lo concatenas con las llaves {{}}.

<div class="modal fade" id="myModal{{publication._id}}" ... >

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.