javascript - 为什么按钮不打开按下按钮的模式？

Question

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

打开的模式必须包含 {{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>

模态:

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

Answer 1

像这样使用纯 Bootstrap 模态:

<!-- 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>

然后在您的组件文件中——您只需要一个附加变量来跟踪 activeProduct。当按钮被按下时——它需要调用一个函数来传递被点击的产品并设置 activeProduct 的值。

public activeProduct: any;

public openModal(product): void {
     // Copying object reference so we dont modify the original
     this.activeProduct = Object.assign({}, product);
}

然后是你的按钮代码:

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

我从来没有实际使用过 Bootstrap 模态，然后同时在按钮上运行点击功能——所以如果模态没有以这种方式打开——你可能需要使用 Javascript 以编程方式打开模态在 openModal() 函数中也是如此。