在Angular 8中显示单击按钮的特定行

Question

我正在开发一个使用 Angular 8 构建的 SPA，在视图中我有一个表格，我在其中显示来自后端的所有数据并使用 ngFor 循环遍历它。这工作正常。在删除按钮上，我编写了一个逻辑，当用户单击该按钮时，它会向用户显示一条消息 Are you sure you want to delete ，当用户接受时，它会删除该行。

问题是当单击按钮时，所有行都会打开并显示消息。我只希望消息显示在被点击的按钮上，而不是所有按钮上。

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

您需要将按钮放在 ngFor 循环之外，当您将按钮放在 ngFor 中时，它会被反复打开。

Answer 2

问题是因为您收到带有标志 confirmdelete 的确认消息，当您单击跨度外的“删除”按钮时，它会变为 True。即

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

因此，当标志变为 True 时，将向所有行显示确认消息。您可以尝试通过将确认消息更改为 sweet alert 组件 来尝试执行相同的功能，并且模板中只有一个用于删除用户的按钮。您需要从 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

将confirmDelete 设为一个对象，键为用户ID，布尔值。 然后，在模板中，检查（或设置）confirmDelete[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 4

您可以使用*ngFor 中的user 对象来显示/隐藏删除确认。而不是声明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 5

@马丁： 您应该编写一个将在单击按钮时调用的方法。此方法将在 .ts 文件中。单击按钮后，使用此方法传递信息并将此信息分配并存储到回调变量并打开弹出窗口。现在在弹出窗口上的按钮操作上，您只需调用回调。