时间戳

首页 > 解决方案 > 如何在angular5中循环ngx-smart-modal

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

问题描述

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

任何帮助将不胜感激，谢谢。

标签： angulartypescriptangular-components

解决方案

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

您可以使用setModalData(...)and getModalData(...)（方法的名称可能会因您使用的库版本以及您是否直接从服务或组件调用而有所不同）。

然后你可以用你想要在模态中显示的数据循环和设置按钮，并使模态动态显示给定的数据。

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

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

推荐阅读