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';HTML de la tabla:@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; } }
<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">×</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>