javascript - 带有 *ngIf 的 Angular 2 条件循环

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-col。

如下图；

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

希望对你有帮助