ngFor में गिनती - कोणीय 2

Question

मैं कोणीय 2. इम में ngFor लूप तक की गिनती एक ग्रिड है कि 3 स्तंभों और पंक्तियों की एक गतिशील राशि है विकसित करने की कोशिश एक समस्या है। मैं अपनी सरणी के माध्यम से लूप करना चाहता हूं और बाएं से दाएं तत्वों को जोड़ना चाहता हूं और प्रत्येक तीन तत्वों को इसे अगली पंक्ति में कूदना चाहिए। मैं आयनिक फ्रेमवर्क 2.0 का उपयोग कर रहा हूँ।

मेरे कोड इस तरह दिखता है:

<ion-row *ngFor="#m of movies; #i = index" (click)="movieTapped(m)"> 
     <ion-col width-33> 
      <div class="row responsive-md"> 
       <img [src]="m.Poster" width="100%" /> 
       {{m.Title}} <br> 
       Rating:  {{m.imdbRating}}<br> 
       Rated:  {{m.Rated}}<br> 
       Released: {{m.Year}}<br> 
      </div> 
     </ion-col> 
     <ion-col width-33> 
      <div class="row responsive-md"> 
       <img [src]="m.Poster" width="100%" /> 
      </div> 
     </ion-col> 
     <ion-col width-33> 
      <div class="row responsive-md"> 
       <img [src]="m.Poster" width="100%" /> 
      </div> 
     </ion-col> 
    </ion-row> 

आशा है कि आप मुझे बाहर कर सकते हैं।

चीयर्स!

Answer 1

कॉलम का समूह (जो मैं समझ सकता) में अपने डेटा संरचना फ़ॉर्मेट करने के लिए तो आप अब भी कॉलम पंक्ति प्रति 3 प्रदान कर सकते हैं नहीं करना चाहते हैं। इसके लिए आपको पंक्ति अनुक्रमणिका के अतिरिक्त सहायक सरणी को पूर्व-निर्धारित करने की आवश्यकता होगी, उदा। [0,1,2,3]। सरणी में तत्वों की संख्या ion-row की आप को रखना चाहते हैं संख्या के बराबर होना चाहिए। आप इस तरह से कुछ कर सकते हैं तो अपने नियंत्रक निर्माता समारोह में:

<ion-row *ngFor="#i of rows" (click)="movieTapped(m)"> 
    <ion-col *ngFor="#m of movies | slice:(i*3):(i+1)*3" width-33> 
    <div class="row responsive-md"> 
     <img [src]="m.Poster" width="100%" /> {{m.Title}} 
     <br> Rating: {{m.imdbRating}} 
     <br> Rated: {{m.Rated}} 
     <br> Released: {{m.Year}} 
    </div> 
    </ion-col> 
</ion-row> 

यह है कि:

this.rows = Array.from(Array(Math.ceil(this.movies.length/3)).keys()) 

फिर टेम्पलेट में आप दो ngFor छोरों होगा। वर्तमान पंक्ति सूचकांक स्लाइस पाइप के आधार पर प्रति पंक्ति आवश्यक वस्तुओं को प्रस्तुत करता है। http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

Answer 2

मैं संरचना आप (3 स्तंभों की पंक्तियों) रेंडर करने के लिए और उसके बाद के आंकड़ों के अनुसार दृश्य प्रस्तुत करना चाहते हैं प्रतिनिधित्व करने के लिए डेटा को संशोधित करेगा।

<ion-row *ngFor="let r of rows; let i = index" (click)="movieTapped(m)"> 
    <ion-col width-33 *ngFor="let m of r; let j = index"> 
     <div class="row responsive-md"> 
      <img [src]="m.Poster" width="100%" /> 
      {{m.Title}} <br> 
      Rating:  {{m.imdbRating}}<br> 
      Rated:  {{m.Rated}}<br> 
      Released: {{m.Year}}<br> 
     </div> 
    </ion-col> 
</ion-row> 

Answer 3

आप डेटा में कोई बदलाव करने की जरूरत नहीं है:

यहाँ डेमो सरल है! आयनिक 2 पहले से ही इसके लिए समर्थन प्रदान कर रहा है।

हम में wrap का उपयोग कर सकते हैं। उदाहरण: <ion-row wrap>

Source

उपयोग एक <ion-row> तत्व पर चादर विशेषता है कि पंक्ति में आइटम रैप करने के लिए अनुमति देने के लिए। यह flex-wrap: wrap; शैली को <ion-row> तत्व पर लागू करता है।