1 votes

Execute a method with parameters outside the modal on the event (click) of a button of a modal. ANGULAR 7

I have a method to delete the row of a table that works correctly (to which I pass the row index). The problem comes when doing a modal to confirm the deletion. When executing the same method from within the modal I pass the row index to delete the corresponding row but it only deletes the first row.

Method of deletion

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 of the table:

<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>

0 votes

Without seeing the component code it is difficult to find out what is going on.

0 votes

I have already put the whole component, but the rest is irrelevant.

1voto

Pablo Lozano Points 23403

I guess you are mixing jQuery with Angular (which is usually not a good idea), so by creating the table you are creating a modal for each element that will be displayed when the delete button is pressed, this part being controlled by jQuery.

The problem is the HTML code that generates the 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>

The button is associated to the modal by means of the attribute data-target="#modalFila" so you are using the same ID for all created manners jQuery does a search by ID and, as it always happens when an ID is repeated, it gets the first element that has been created. So the modal opens for the first line of your table.

The solution is simple: add to the id the value of i to generate unique identifiers.

0 votes

Thank you very much for helping me. Just a doubt... do I add the value of i to the id of the modal or to the data-target?

1 votes

To both, since it will read data-target to get the id of the element to be shown

0 votes

Thank you very much for your help! I mark your answer as valid

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X