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

Question

我正在使用 Angular 8 构建 SPA，在视图中我有一个 table，由此我显示来自后端的所有数据并使用 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 时，将向所有行显示确认消息。您可以尝试通过将确认消息更改为 甜蜜警报组件 来实现相同的功能，并且在模板中只有一个用于删除用户的按钮。您需要从 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>

因此，在单击该按钮后，在您的组件内放置一个甜蜜的警报，用户将在其中确认是否删除。

甜蜜警报组件参考link：-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

您可以使用 user 对象中的 *ngFor 来 show/hide 删除确认。而不是声明 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 文件中。单击按钮后，使用此方法传递信息并将此信息分配并存储到回调变量并打开弹出窗口。现在，在弹出窗口上执行按钮操作时，您只需调用回调即可。

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

Displying a specific row of a clicked button in Angular 8

events

click

button

angular