1

Tengo un método para borrar la fila de una tabla que funciona correctamente (al cual le paso el indice de la fila). El problema viene al hacer un modal para confirmar el borrado. Al ejecutar el mismo método desde dentro del modal le paso el índice de la fila para que borre la fila correspondiente pero me borra solo la primera fila.

Método de borrado

import { Component, OnInit, Inject, Injectable } from '@angular/core';
import { CONTACTOS } from './contactos-mock';
import { Contacto } from 'src/app/entities/contacto';
import { Router } from '@angular/router';

@Component({ selector: 'app-contactos', templateUrl: './contactos.component.html', styleUrls: ['./contactos.component.css'] })

export class ContactosComponent implements OnInit { public contactos: Contacto[] = CONTACTOS; constructor(private router: Router) { }

ngOnInit() { }

deleteRow(id) { for (let i = 0; i < this.contactos.length; ++i) { if (this.contactos[i] === this.contactos[id]) { this.contactos.splice(i, 1); } } }

moveUp(value, index) { if (index > 0) { const tmp = this.contactos[index - 1]; this.contactos[index - 1] = this.contactos[index]; this.contactos[index] = tmp; } // return this.contactos; }

moveDown(value, index) { if (index >= 0 && index < this.contactos.length-1) { const tmp = this.contactos[index + 1]; this.contactos[index + 1] = this.contactos[index]; this.contactos[index] = tmp; } // return this.contactos; } }

HTML de la tabla:
<br />
<div class="card">
  <table class="table">
    <thead class="thead-light">
      <th scope="col">Nombre</th>
      <th scope="col">Apellidos</th>
      <th scope="col">Tipo relación</th>
      <th scope="col">Representante</th>
      <th scope="col">Tipo representación</th>
      <th scope="col">Avisar en urgencia</th>
      <th scope="col">Aut. visitas</th>
      <th scope="col">Aut. acompañar</th>
      <th scope="col">Acciones</th>
    </thead>
    <tbody>
      <tr *ngFor="let contacto of contactos; let i = index">
        <td>{{ contacto.nombre }}</td>
        <td>{{ contacto.apellidos }}</td>
        <td>{{ contacto.tipo_rel }}</td>
        <td>
          <div class="form-check">
            <input
              type="checkbox"
              [checked]="contacto.representante"
              disabled
            />
          </div>
        </td>
        <td>{{ contacto.tipo_rep }}</td>
        <td>
          <input type="checkbox" [checked]="contacto.avisar" disabled />
        </td>
        <td>
          <input type="checkbox" [checked]="contacto.visita" disabled />
        </td>
        <td>
          <input type="checkbox" [checked]="contacto.acompanar" disabled />
        </td>
        <td>
          <button class="btn-primary" routerLink="/residentes/anadir-contacto">
            <i class="fa fa-pencil-square fa-lg" aria-hidden="true"></i>
          </button>

          <button
            class="btn-primary"
            data-toggle="modal"
            data-target="#modalFila"
          >
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
          </button>

          <div
            class="modal fade"
            id="modalFila"
            tabindex="-1"
            role="dialog"
            aria-labelledby="modalTodos"
            aria-hidden="true"
          >
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">
                    Limpiar Contactos
                  </h5>
                  <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <i
                    class="fa fa-exclamation-circle fa-5x d-flex justify-content-center"
                    style="color:orange"
                    aria-hidden="true"
                  ></i>
                  <span class="d-flex justify-content-center"
                    >Va a eliminar el contacto seleccionado</span
                  >
                  <span class="d-flex justify-content-center"
                    >¿Está seguro?</span
                  >
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Cancelar
                  </button>
                  <button

                    type="button"
                    class="btn btn-primary"
                    data-dismiss="modal"
                    (click)="deleteRow(i)"
                  >
                    Aceptar
                  </button>
                </div>
              </div>
            </div>
          </div>
          <button class="btn-primary">
            <i
              class="fa fa-arrow-up fa-lg"
              aria-hidden="true"
              (click)="moveUp(contacto, i)"
            ></i>
          </button>
          <button class="btn-primary">
            <i
              class="fa fa-arrow-down fa-lg"
              aria-hidden="true"
              (click)="moveDown(contacto, i)"
            ></i>
          </button>
        </td>

      </tr>
    </tbody>
  </table>
</div>

2
  • Sin ver el código del componente es complicado averiguar qué está pasando Commented el 4 abr. 2019 a las 13:11
  • Ya lo he puesto entero el componente, pero vamos que lo que afectaba a este caso ya estaba puesto el resto es irrelevante Commented el 4 abr. 2019 a las 13:20

1 respuesta 1

1

Supongo que estás mezclando jQuery con Angular (lo que no suele ser una buena idea), así que al crear la tabla estás creando un modal para cada elemento que se mostrará cuando se pulse el botón de borrar, siendo esta parte controlada por jQuery.

El problema es el código HTML que genera el modal:

<button class="btn-primary" data-toggle="modal" data-target="#modalFila">
    <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
</button>

<div class="modal fade" id="modalFila" tabindex="-1" role="dialog" aria-labelledby="modalTodos" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    Limpiar Contactos
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <i class="fa fa-exclamation-circle fa-5x d-flex justify-content-center" style="color:orange"
                    aria-hidden="true"></i>
                <span class="d-flex justify-content-center">Va a eliminar el contacto seleccionado</span>
                <span class="d-flex justify-content-center">¿Está seguro?</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="deleteRow(i)">
                    Aceptar
                </button>
            </div>
        </div>
    </div>
</div>

El botón lo asocias al modal mediante el atributo data-target="#modalFila", así que estás usando el mismo ID para todos los modales creados. jQuery hace una búsqueda por ID y, como siempre pasa cuando se repite un ID, obtiene el primer elemento que se ha creado. Por tanto se abre el modal para la primera línea de tu tabla.

La solución es sencilla: añade al id el valor de i para generar identificadores únicos.

3
  • Muchas gracias por ayudarme. Una duda solo... añado el valor de i al id del modal o al data-target? Commented el 4 abr. 2019 a las 14:19
  • 1
    A ambos, ya que se va a leer data-target para obtener el id del elemento a mostrar Commented el 4 abr. 2019 a las 14:22
  • Muchas gracias me has ayudado mucho! Te marco la respuesta como valida Commented el 4 abr. 2019 a las 14:37

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.