我无法在模态部分给出id值

Question

<div class="table">
  ....
    <tr *ngFor="let product of products; index as i">
      <th scope="row">{{ i + 1 }}</th>
      <td>{{ product.name }}</td>
      <td>{{ product.category }}</td>
      <td>{{ product.price }}</td>
      <td>{{ product.quantity ? "not over" : "it's over" }}</td>
      <th>
        <button
          class="btn btn-warning ml-2"
          data-toggle="modal"
          data-target="#updateProduct"
          (click)="fetchProduct(product._id, updateModal)"
        >
          UPDATE
        </button>
        <button
          class="btn btn-danger ml-2"
          data-toggle="modal"
          data-target="#deleteProduct"

        >
          DELETE
        </button>
      </th>
    </tr>
   ....
 </div>

<div
  class="modal fade"
  id="deleteProduct"
  data-backdrop="static"
  tabindex="-1"
  role="dialog"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <h4>Are you sure you want to delete?</h4>
        <button
          type="button"
          class="btn btn-secondary ml-2 mr-2"
          data-dismiss="modal"
        >
          CANCEL
        </button>
        <button
          type="button"
          class="btn btn-primary ml-2 mr-2"
          (click)="deleteProduct(product._id)"
        >
          DELETE
        </button>
      </div>
    </div>
  </div>
</div>

---

这两个代码块在同一HTML页面中。

我的目标是在表中按下删除键时删除警告模式。然后按模式上的删除按钮以删除现有行。但是我无法获得模态部分返回的id值。

通常，当我在表中没有模式的情况下执行此操作时，它可以正常工作，因为我可以获取id值并直接将其删除。但是我不知道外出时如何给这个id值。

我该如何解决？

Answer 1

在您的ts中创建新变量：

deleteID : any;

在您的html中添加以下代码：（在ngFor内部）

<button
          class="btn btn-danger ml-2"
          data-toggle="modal"
          data-target="#deleteProduct"
(click)="deleteID= product._id"
        >
          DELETE
        </button>

内部模式：

<button
          type="button"
          class="btn btn-primary ml-2 mr-2"
          (click)="deleteProduct(deleteID)"
        >
          DELETE
        </button>

希望会有所帮助。