Javascript 为什么按钮没有打开按下的按钮'；什么是模态？

最后，我想让按钮打开一个模式，其中填充了被按下按钮的产品信息。我不知道如何将此信息传递给modal

打开的模式必须包含

{{product.name}}

、

{{product.description}}

、人们想要租赁产品的天数和租赁按钮

<div class="row">
      <div class="col-md-3" style="padding-left:35px; padding-top: 35px;" 
      *ngFor="let product of products">

        <!-- Card Wider -->`enter code here`
<div class="card card-cascade wider shadow" style=" width: 15rem; height: 400px;">

    <!-- Card image -->
    <div class="view view-cascade overlay">
      <div class="inner">
      <img  class="card-img-top" src="{{product.imageUrl}}" alt="Card image cap">
      </div>
      <a href="#!">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <!-- Card content -->
    <div class="card-body card-body-cascade text-center">

      <!-- Title -->
      <h4 class="card-title"><strong>{{product.name}}</strong></h4>
      <!-- Subtitle -->

      <!-- Text -->
      <p class="card-text">{{product.description}} </p>

      <!-- Price and rent button-->
      <div >
          <hr>
          <div>
              <p><b>$1</b> /day</p>
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen">
                Rent
              </button>
            </div>
      </div>
    </div>
  </div>
      </div>
</div>

`在这里输入代码`
{{product.name}}
{{product.description}

每日1元

租

模态：

<div class="modal fade" id="rentScreen">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Product name</h2>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Description of product</p>
      </div>
      <div class="model-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">confirm</button>
      </div>
    </div>
  </div>
</div>

产品名称
&时代；
产品说明

确认

使用以下纯引导模式：

<!-- MODAL -->

<div class="modal fade" id="rentScreen">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">{{activeProduct.name}}</h2>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{activeProduct.description}}</p>
      </div>
      <div class="model-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">confirm</button>
      </div>
    </div>
  </div>
</div>

然后您的按钮代码：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen" (click)="openModal(product)">
                Rent
              </button>

租

我从来没有实际使用过引导模式，然后同时在按钮上运行了单击功能——因此，如果模式没有以这种方式打开——您可能还需要使用Javascript以编程方式在OpenModel（）函数中打开模式。

您可以在此处查看：在模式部分。这里有多个示例，还有一些代码可以帮助您继续。

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen" (click)="openModal(product)">
                Rent
              </button>