我不能在模态部分给出 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页面中。

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

通常，当我在 table 中不使用模态执行此操作时，它工作正常，因为我可以获取 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>

希望对您有所帮助。

我不能在模态部分给出 id 值

I can not give id value in the modal part

javascript

bootstrap-modal

ng-bootstrap

angular