Question

我正在使用Angular 8构建SPA，在视图上我有一张表，其中显示了来自后端的所有数据，并使用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

问题是因为您收到带有标志 confirmdelete 的确认消息，当您单击跨度之外的Delete按钮时，该消息将变为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>

因此，在您的组件内部单击该按钮时，会发出一个甜蜜的警报，用户将在该警报中确认是否删除。

甜蜜警报组件的参考链接：-https://www.npmjs.com/package/sweetalert2

Answer 2

您可以使用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 3

将按钮放置在ngFor内时，您需要将其放置在ngFor循环之外。

Answer 4

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

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

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

5 个答案: