具有*ngIf的角2条件环

Question

我正在建设离子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>

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

谢谢桑尼

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

我希望这能帮到你