Javascript 带*ngIf的角2条件循环

我正在构建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 -->

{{homeCategories[3].name}
{{slides.title.rendered}

我需要的是以某种方式创建循环，以便对于每个离子幻灯片可以有三个离子列输出

如下图所示

<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给你更好的答案我需要更多的信息，但基本上你需要创建一个幻灯片阵列，在那里你要存储幻灯片的数据并用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>

---

我希望这会有所帮助

我相信这个问题中的代码可以减少80%，而不会丢失与问题相关的任何信息。不过，添加更多关于预期结果或行为的信息会有所帮助。我不明白问题出在哪里。为了更好地理解我的需求，我给出了完整的代码……我想这主要是混淆；-）我简化了代码，您现在能理解吗？是的，现在好多了：）。我建议在代码中准备一个数据结构，该结构反映您希望在DOM中使用的结构，然后使用嵌套的

*ngFor

呈现

，并在内部

*ngFor

呈现

。抱歉，我不明白。你可以再解释一遍。我将删除答案。单独的话题和建议。您应该向所有p和h标记添加离子文本。如果你不把它放进去，爱奥尼亚会给你一个警告。请看我在代码中设置了*ngFor的位置，但我希望以不同的方式输出，以创建循环，这样每个离子幻灯片可以有三个离子柱输出。

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