Angular 2 Conditional Loop with * ngIf

Question

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

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

<!--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 --> 

我需要的是一个方法来创建循环，使每一个离子滑可能有三种离子山坳应该输出。

像下面一样;

<ion-slide> 
    <ion-grid> 
     <ion-row> 
      <ion-col col-4></ion-col col-4> 
      <ion-col col-4></ion-col col-4> 
      <ion-col col-4></ion-col col-4> 
     </ion-row> 
    </ion-grid> 
</ion-slide> 
<ion-slide> 
    <ion-grid> 
     <ion-row> 
      <ion-col col-4></ion-col col-4> 
      <ion-col col-4></ion-col col-4> 
      <ion-col col-4></ion-col col-4> 
     </ion-row> 
    </ion-grid> 
</ion-slide> 

如何创建条件标签以实现所需的结果？

感谢SANNY

Answer 1

为了让你更好的答案，我需要更多的信息，但基本上你需要创建一个Array幻灯片你要去哪里来存储数据，幻灯片和与循环显示。

<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({...}) 

我希望这有助于