Question

我正在构建IONIC 2应用程序，我需要在我的应用程序中集成幻灯片。

我在我的HTML中实现循环条件问题。下面是我当前的代码，其中循环输出内容循环运行的时间。

2017-04-20 06:12:00.977 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - stopping org.eclipse.jetty.server.Server@76fe48e4
2017-04-20 06:12:00.978 Thread-13 DEBUG org.eclipse.jetty.server.Server - Graceful shutdown org.eclipse.jetty.server.Server@76fe48e4 by
2017-04-20 06:12:00.978 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - stopping application@5905282d{HTTP/1.1}{0.0.0.0:7004}
2017-04-20 06:12:00.978 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - stopping org.eclipse.jetty.server.ServerConnector$ServerConnectorManager@ce5af8b
2017-04-20 06:12:00.979 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - stopping org.eclipse.jetty.io.SelectorManager$ManagedSelector@8ba578f keys=0 selected=0
2017-04-20 06:12:00.979 Thread-13 DEBUG org.eclipse.jetty.io.SelectorManager - Stopping org.eclipse.jetty.io.SelectorManager$ManagedSelector@8ba578f keys=0 selected=0
2017-04-20 06:12:00.979 Thread-13 DEBUG org.eclipse.jetty.io.SelectorManager - Queued change org.eclipse.jetty.io.SelectorManager$ManagedSelector$Stop@1e9ee58d
2017-04-20 06:12:00.979 dw-25-selector-ServerConnectorManager@ce5af8b/0 DEBUG org.eclipse.jetty.io.SelectorManager - Selector loop woken up from select, 0/0 selected
2017-04-20 06:12:00.979 dw-25-selector-ServerConnectorManager@ce5af8b/0 DEBUG org.eclipse.jetty.io.SelectorManager - Running change org.eclipse.jetty.io.SelectorManager$ManagedSelector$Stop@1e9ee58d
2017-04-20 06:12:00.980 Thread-13 DEBUG org.eclipse.jetty.io.SelectorManager - Stopped org.eclipse.jetty.io.SelectorManager$ManagedSelector@8ba578f keys=-1 selected=-1
2017-04-20 06:12:00.980 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - STOPPED org.eclipse.jetty.io.SelectorManager$ManagedSelector@8ba578f keys=-1 selected=-1
2017-04-20 06:12:00.980 dw-25-selector-ServerConnectorManager@ce5af8b/0 DEBUG org.eclipse.jetty.io.SelectorManager - Stopped Thread[dw-25-selector-ServerConnectorManager@ce5af8b/0,5,main] on org.eclipse.jetty.io.SelectorManager$ManagedSelector@8ba578f keys=-1 selected=-1
2017-04-20 06:12:00.980 Thread-13 DEBUG o.e.j.u.component.AbstractLifeCycle - stopping org.eclipse.jetty.io.SelectorManager$ManagedSelector@68481f8e keys=0 selected=0
2017-04-20 06:12:00.980 Thread-13 DEBUG org.eclipse.jetty.io.SelectorManager - Stopping org.eclipse.jetty.io.SelectorManager$ManagedSelector@68481f8e keys=0 selected=0
2017-04-20 06:12:00.980 Thread-13 DEBUG org.eclipse.jetty.io.SelectorManager - Queued change org.eclipse.jetty.io.SelectorManager$ManagedSelector$Stop@51f09baf

我需要的是以某种方式创建循环，以便每个离子滑动可以输出三个 ion-col 。

如下所示;

<!--categories_slider-->
  <div class="categories_slider english-font" *ngIf="homeCategories[3].content">
    <h4>{{homeCategories[3].name}}</h4>
    <!-- -->    
    <ion-slides pagination="true" autoplay="5000" loop="true" speed="1000" >
      <ng-container *ngFor="let slides of homeCategories[3].posts; let i = index">   
        <ion-slide>
          <ion-grid>
            <ion-row>
              <ion-col col-4>
                <div class="categories_slider_image">                      
                  <wordpress-feature-media (click)="previewPost(slides)" *ngIf="slides.featured_media" [id]="slides.featured_media"></wordpress-feature-media>
                </div>
                <h5>{{slides.title.rendered}}</h5>
                <p [innerHtml]="slides.title.rendered"></p>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-slide>
      </ng-container>
    </ion-slides>
  </div>
  <!--categories_slider end -->

如何创建条件标签以达到预期效果？

谢谢Sanny

Answer 1

为了给你更好的答案，我需要更多的信息，但基本上你需要创建一个数组幻灯片，你将在那里存储幻灯片的数据并用for循环显示它。

<ion-slide *ngFor = slide of slides>
    <ion-grid>
        <ion-row>
            <ion-col col-4>{{ slide.title }}</ion-col col-4>
            <ion-col col-4>{{ slide.img }}</ion-col col-4>
            <ion-col col-4>{{ slide.something }}</ion-col col-4>
        </ion-row>
    </ion-grid>
</ion-slide>

我会创建一个像这样的组件

imports....;


class Slides {
    'title': string  = "";
    'img': string     = "";
    'something': string = "";
 }

@Component({
  selector: 'page-slides',
  templateUrl: 'slides.html'
})

export class SlidesPage {

  public slides: Slides = new Slides();

constructor....

...
this.slides.push({...})

我希望这会有所帮助

带有* ngIf的Angular 2条件循环

1 个答案: