Я не могу дать значение 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>

надеюсь, это поможет.