Html 如何在同一页面上创建多个MDB模态，并在每个模态弹出窗口中具有不同的内容？

如何在同一页面上创建多个MDB模态，并在每个模态弹出窗口中具有不同的内容？当前，最后一个模态的模态体中的内容将在单击任一模态时显示，即使每个模态体中有单独的内容？我在这里使用了MDB模式标记：这是为什么

以下是我的代码：

    <!-- Modal 1 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 1
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 1</h4>
          </div>
          <div class="modal-body">
            Content 1
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 1 -->
    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="basicModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="basicModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

模式1
×
内容1
内容1
接近
好啊
模式2
×
内容2
内容2
接近
好啊

#基本模态

id在两种模态中都使用。此值应该是唯一的

您需要在第二个模态代码中更改此值，例如：

    <!-- Modal 2 -->
    <button type="button" mdbBtn color="primary" class="relative waves-light p-2 modal-btns" (click)="secondModal.show()" mdbWavesEffect
      *ngIf="showBasic">
     Modal 2
    </button>
    <div mdbModal #secondModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog"
      aria-labelledby="myBasicModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title w-100" id="myModalLabel">Content 2</h4>
          </div>
          <div class="modal-body">
            Content 2
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
              (click)="secondModal.hide()" mdbWavesEffect>Close</button>
            <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>OK!</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal 2 -->

模式2
×
内容2
内容2
接近
好啊