Отображение определенной строки нажатой кнопки в Angular 8

Question

Я работаю над SPA, созданным с использованием Angular 8. В представлении у меня есть таблица, в которой я отображаю все данные из бэкэнда и перебираю их, используя цикл ngFor.Это отлично работает.На кнопке удаления я написал логику, согласно которой, когда пользователь нажимает на кнопку, он показывает пользователю сообщение Вы уверены, что хотите удалить , когда пользователь принимает, он удаляет строку.

Проблема в том, что при нажатии кнопки открываются все строки и показывается сообщение.Я хочу, чтобы на нажатой кнопке отображалось только сообщение , а не все кнопки .

Show.component.html

 <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Age (Years)</th>
        <th>Gender</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of userData">
       <td>
            {{ user.name}}
       </td>
       <td>
            {{ user.age}}
       </td>
       <td>
            {{ user.gender}}
       </td>
       <td>
        <button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
        <span *ngIf="confirmDelete">
          <span> Are you sure you want to delete ?</span>
          <button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
          <button class="btn btn-primary" (click)="confirmDelete=false">No </button>
        </span>
        <button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true">Delete</button>
       </td>
      </tr>
    </tbody>
  </table>

Show.component.ts

import { Component, OnInit , ViewChild, ElementRef} from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import {  SnotifyService } from 'ng-snotify';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {
  public userData : any[];
  public error = null;

  constructor(
    private Shared : SharedService,
    private Auth:AuthService,
    private router: Router,
    private Notify:SnotifyService
    ) { }

  ngOnInit() {
    this.Shared.checkAll$.subscribe(message => this.userData = message);
  }

  //delete user
  deleteUser(id:number){
    return this.Auth.delete(id).subscribe(
      data => console.log(data),
      error => console.log(error)
    );
  }
}

Answer 1

Вы можете использовать объект user в *ngFor, чтобы показать / скрыть подтверждение удаления. Вместо объявления confirmDelete вы должны использовать user.confirmDelete следующим образом:

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Age (Years)</th>
        <th>Gender</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of userData">
       <td>
            {{ user.name}}
       </td>
       <td>
            {{ user.age}}
       </td>
       <td>
            {{ user.gender}}
       </td>
       <td>
        <button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
        <span *ngIf="user.confirmDelete">
          <span> Are you sure you want to delete ?</span>
          <button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
          <button class="btn btn-primary" (click)="user.confirmDelete=false">No </button>
        </span>
        <button *ngIf="!user.confirmDelete" class="btn btn-danger" (click)="user.confirmDelete=true">Delete</button>
       </td>
      </tr>
    </tbody>
  </table>

Таким образом, вы можете показывать только одну строку за раз.

Answer 2

Проблема заключается в том, что у вас есть сообщение о подтверждении с флагом Подтвердить удаление , и оно будет установлено в True, когда вы нажмете кнопку Удалить за пределами вашего диапазона. * 1003 то есть *

<button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true">Delete</button>

Следовательно, когда флаг установлен в True, подтверждающее сообщение будет показано во всех строках. Вы можете попробовать выполнить те же функции, изменив сообщение с подтверждением на компонент сладкого оповещения и просто иметь одну кнопку для удаления пользователя в шаблоне. Вам нужно удалить приведенный ниже код из шаблона HTML, преобразовать его в приятное предупреждение в контроллере.

<span *ngIf="confirmDelete">
          <span> Are you sure you want to delete ?</span>
          <button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
          <button class="btn btn-primary" (click)="confirmDelete=false">No </button>
        </span>

Так вы в последний раз выглядели бы так:

 <td>
        <button class="btn btn-primary" (click)="edit(user.id)">Edit</button>

        <button class="btn btn-danger" (click)="deleteUser(user.id)">Delete</button>
       </td>

Поэтому при нажатии этой кнопки внутри вашего компонента поместите приятное предупреждение, откуда пользователь подтвердит, удалять или нет.

Ссылочная ссылка для компонента сладкого оповещения: - https://www.npmjs.com/package/sweetalert2

Answer 3

@ Martin: Вы должны написать метод, который будет вызываться по нажатию кнопки. Этот метод будет в файле .ts. Как только вы нажмете кнопку, передайте информацию этим методом, назначьте и сохраните эту информацию в переменной обратного вызова и откройте всплывающее окно. Теперь при нажатии кнопки над всплывающим окном вы просто вызываете функцию обратного вызова.

Answer 4

Сделать Подтвердить удаление объекта с ключами в качестве идентификаторов пользователей и логическими значениями. затем в шаблоне проверьте наличие (или установите) Подтверждение удаления [user.id]:

<span *ngIf="confirmDelete[user.id]">
  <span> Are you sure you want to delete ?</span>
  <button class="btn btn-danger" (click)="deleteUser(user.id)">Yes</button>
  <button class="btn btn-primary" (click)="confirmDelete[user.id] = false">
    No
  </button>
</span>
<button
  *ngIf="!confirmDelete[user.id]"
  class="btn btn-danger"
  (click)="confirmDelete[user.id] = true"
>
  Delete
</button>

и в .ts:

let confirmDelete = {};

Answer 5

Вам нужно поместить кнопку вне цикла ngFor, когда вы помещаете кнопку в ngFor, она открывается многократно.