Angular 2 Conditional Loop with * ngIf

我正在構建IONIC 2應用程序，我需要在我的應用程序中集成幻燈片。Angular 2 Conditional Loop with * ngIf

我有循環條件問題在我的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

來源

2017-04-20 Sanny Srivastava

我敢肯定，在這個問題上的代碼可以通過減少80％，而不會丟失任何信息相關的問題https://stackoverflow.com/help/mcve 雖然添加有關預期結果或行爲的更多信息將會有所幫助。我不明白問題是什麼。 –

我給了完整的代碼，以更好地理解我的要求... –

恕我直言，它主要是迷惑;-) –

爲了讓你更好的答案，我需要更多的信息，但基本上你需要創建一個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({...})

我希望這有助於

來源

2017-04-20 07:54:05 ACES

我認爲你沒有正確地閱讀這個問題... –

對不起，我不明白。你可以試着再解釋一遍。我將刪除答案。單獨的話題和建議。您應該爲所有p和h標籤添加離子文本。如果你沒有放置它，Ionic會給你發出警告。 – ACES

看看我在哪裏設置了* ngFor，但是我希望以不同的方式創建循環，以便每個離子滑塊可以有三個離子col應該輸出。 –

Angular 2 Conditional Loop with * ngIf

回答

相關問題