如何在angular5中实现angular5模式的循环

Question

我正在与ngx-智能模式在角5项目，ngx-智能模式工作完美时，不在*ngFor循环。我想要的只是从数据库中直接获取数据，并根据循环数来显示。这是我的密码。

<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(...) (方法的名称可能因您使用的库的版本而异，如果您直接从服务或组件调用它)。

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

这样做会大大提高性能，因为如果将<ngx-smart-modal>放入循环中，就会迫使它一次又一次地声明。

只允许一个活动的<ngx-smart-modal>实例动态显示数据，这取决于单击了循环中的哪个按钮。