为什么按钮没有打开按下按钮的模态？答案

【问题标题】：Why is the button not opening the pressed button's modal?为什么按钮没有打开按下按钮的模态？
【发布时间】：2019-01-15 13:08:45
【问题描述】：

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

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

【问题讨论】：

您可以在这里查看：angular-ui.github.io/bootstrap 在模态部分。那里有多个示例，还有可以帮助您继续进行的代码。

标签： javascript html css angular typescript

【解决方案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() 函数中也是如此。

【讨论】：