如何在angular5中循环ngx-smart-modal

Question

我在 Angular 5 项目中使用 ngx-smart-modal，当不在 *ngFor 循环内时，ngx-smart-modal 可以完美运行。我想要的只是从数据库中动态地获取数据并根据循环数显示。这是我的代码。

<div class="container">

    <div class="row">

     <div class="col-md-4 col-sm-6" *ngFor = "let modules of get_modules; let i = index">
          <article class="post-news"><a class="mouserPointer" (click)="ngxSmartModalService.getModal('myModal').open()"><img src="./assets/images/{{ modules.imagepath }}" alt="" class="img-responsive"></a>
                    <div class="post-news-body">
                      <h6><a class="mouserPointer" (click)="ngxSmartModalService.getModal('myModal').open()" >{{ modules.heading }} </a></h6>
                      <div>
                        <p>{{ modules.body }}</p>
                      </div>
                      <!-- <div class="post-news-meta offset-top-20"><span class="text-black"><span class="fa fa-clock-o"></span>2 days ago</span></div> -->
                    </div>
                  </article>
                  <!-- Print popup modal alongside -->
               <ngx-smart-modal #myModal identifier="myModal">
      <h1>{{ modules.heading }}!</h1>
      <img class="img-responsive" src="./assets/images/faa.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper neque ac ullamcorper scelerisque. Proin molestie erat sapien, ac dapibus tortor placerat a. Vivamus quis tempor mauris. Ut porta ultricies nisi in eleifend. In magna nisi, tempor pharetra consequat in, sagittis id augue. Aliquam eu lectus id mi vulputate convallis. Nam facilisis nisl quis urna gravida tempus.</p>

      <button (click)="myModal.close()" class="btn btn-danger">Close</button>
    </ngx-smart-modal>


       </div>

    </div>


  </div>

我尝试了几种方法，例如使用模态标识符来循环索引，但仍然没有奏效。喜欢。

<div class="container">

    <div class="row">

     <div class="col-md-4 col-sm-6" *ngFor = "let modules of get_modules; let i = index">
          <article class="post-news"><a class="mouserPointer" (click)="ngxSmartModalService.getModal('{{i}}').open()"><img src="./assets/images/{{ modules.imagepath }}" alt="" class="img-responsive"></a>
                    <div class="post-news-body">
                      <h6><a class="mouserPointer" (click)="ngxSmartModalService.getModal('{{i}}').open()" >{{ modules.heading }} </a></h6>
                      <div>
                        <p>{{ modules.body }}</p>
                      </div>
                      <!-- <div class="post-news-meta offset-top-20"><span class="text-black"><span class="fa fa-clock-o"></span>2 days ago</span></div> -->
                    </div>
                  </article>
                  <!-- Print popup modal alongside -->
               <ngx-smart-modal #{{i}} identifier="{{i}}">
      <h1>{{ modules.heading }}!</h1>
      <img class="img-responsive" src="./assets/images/faa.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper neque ac ullamcorper scelerisque. Proin molestie erat sapien, ac dapibus tortor placerat a. Vivamus quis tempor mauris. Ut porta ultricies nisi in eleifend. In magna nisi, tempor pharetra consequat in, sagittis id augue. Aliquam eu lectus id mi vulputate convallis. Nam facilisis nisl quis urna gravida tempus.</p>

      <button (click)="myModal.close()" class="btn btn-danger">Close</button>
    </ngx-smart-modal>


       </div>

    </div>


  </div>

任何帮助将不胜感激。

Answer 1

我建议你在模板中只声明一个<ngx-smart-modal> 而不要循环遍历它。

您可以使用setModalData(...) 和getModalData(...)（方法的名称可能会有所不同，具体取决于您使用的库版本以及您是从服务还是直接从组件调用它）。

然后你就可以循环和设置你想在modal中显示的数据的按钮，让modal动态显示给定的数据。

这样做是一个巨大的性能改进，因为如果你将<ngx-smart-modal> 放在一个循环中，你将强制它一次又一次地被声明。

只让一个<ngx-smart-modal> 实例处于活动状态，该实例将根据单击循环的哪个按钮动态显示数据。