我正在构建 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>
如何创建条件标签以达到预期的效果?
谢谢桑尼
最佳答案
为了给您更好的答案,我需要更多信息,但基本上您需要创建一个数组幻灯片,您将在其中存储幻灯片数据并使用 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({...})
希望对你有帮助
关于javascript - 带有 *ngIf 的 Angular 2 条件循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43511786/