时间戳

首页 > 解决方案 > 如何以角度将值传递给模态

angular - 如何以角度将值传递给模态

问题描述

我正在使用来自 bootstrap mdb 的模态作为对话框来删除记录。你能告诉我如何将数据传递给模态。我从“ https://mdbootstrap.com/docs/angular/modals/basic/ ”中获取了模态代码。这是 Angular 的 MDB Bootstrap。

这是我通过确认删除代码的方式：

<div
  mdbModal
  #basicModal="mdbModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">
          Are you sure you want to delete this record?
        </h4>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          mdbBtn
          color="secondary"
          class="waves-light"
          aria-label="Close"
          (click)="basicModal.hide()"
          mdbWavesEffect
        >
          No
        </button>
        <button
          type="button"
          mdbBtn
          color="danger"
          class="relative waves-light"
          mdbWavesEffect
          (click)="onRemove(log)"
        >
          Yes, remove
        </button>
      </div>
    </div>
  </div>
</div>

<mdb-card>
    <mdb-card-body>
      <table class="table table-striped table-responsive-md btn-table">
        <thead>
          <tr>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="let log of logs; let i = index"
            [class]="i % 2 == 0 ? 'table-info' : ''"
          >
            <td>
              <span class="table-remove">
                <button
                  type="button"
                  mdbBtn
                  color="danger"
                  rounded="true"
                  size="sm"
                  class="my-0"
                  (click)="basicModal.show()"
                >
                  Remove
                </button>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </mdb-card-body>
</mdb-card>

谢谢你。

标签： angularbootstrap-4

解决方案

您可以在 ts 文件组件中打开模型：

将您的 html 更改为：

          (click)="openModal()"

将此添加到您的组件中：

  openModal() {
    this.modalRef = this.modalService.show(ModalComponent, { this.modalOptions });
  }

this.modalOptions 是你的数据

推荐阅读