Angular2 ngFor सूचकांक

Question

का उपयोग करते हुए मैं इस कोड है:

<div class="row list-group"> 
    <div *ngFor="let product of products" > 
    <app-product [product]="product"></app-product> 
    </div> 
</div> 

मैं सोच रहा था वहाँ किसी भी तरह से मैं बाल्टी में सरणी से उत्पादों को प्राप्त कर सकते हैं? कुछ इस तरह:

<div class="list-group"> 
    <div *ngFor="products; index+3" > 
    <div class="row"> 
     <app-product [product]="products[index]"></app-product> 
     <app-product [product]="products[index+1]"></app-product> 
     <app-product [product]="products[index+2]"></app-product> 
    </div> 
    </div> 
</div> 

इस तरह मैं सभी तत्वों को मैं एक पंक्ति में की जरूरत है

युपीडी

धन्यवाद टेडी सितारे को मैं इस समाधान के साथ समाप्त हो गया हो सकता है:

<div class="list-group"> 
    <div *ngFor="let product of products;let i = index"> 
    <div class="row" *ngIf="i%3===0"> 
     <app-product [product]="products[i]"></app-product> 
     <div *ngIf="products[i + 1]"> 
     <app-product [product]="products[i + 1]"></app-product> 
     </div> 
     <div *ngIf="products[i + 2]"> 
     <app-product [product]="products[i + 2]"></app-product> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

सूचकांक के लिए यह प्रयास करें:

सह ntroller फ़ाइल जोड़ने के समारोह:

chunks(array, size) { 
    let results = []; 
    while (array.length) { 
    results.push(array.splice(0, size)); 
    } 
    return results; 
}; 

में आप फ़ाइल को देखने के:

<div *ngFor="let chunkProduct of chunks(products,3);" > 
    <div class="row"> 
     <app-product *ngFor="let product of chunkProduct" [product]="product"></app-product> 
    </div> 
</div> 

यह सब संख्या, न केवल% 3 संख्या के लिए काम करेंगे।

@ टेडी स्टर्न का समाधान काम करेगा 3% यदि हमारे पास 8 उत्पाद हैं तो यह दिखाएगा कि केवल अंतिम 2 अंतिम 2 खो जाएंगे, इसमें यह भी दिखाया जाएगा।

और यदि आप तत्व का निरीक्षण करते हैं और जांच करते हैं, तो यह प्रत्येक उत्पाद के माध्यम से लूप होगा और क्योंकि यह सूचकांक% 3 या नहीं, इससे कोई फर्क नहीं पड़ता है।

Answer 2

कोणीय इस कार्यक्षमता को बॉक्स के बाहर प्रदान नहीं करता है। मुझे लगता है कि सबसे आसान तरीका वांछित परिणाम प्राप्त करने तो जैसे हर तीसरे सूचकांक पर केवल प्रदर्शन डेटा के लिए है:

<div class="list-group"> 
    <div *ngFor="let p of products; let idx = index" > 
    <div class="row" *ngIf="idx % 3 === 0"> 
     <app-product [product]="products[idx]"></app-product> 
     <app-product [product]="products[idx+1]"></app-product> 
     <app-product [product]="products[idx+2]"></app-product> 
    </div> 
    </div> 
</div> 

Demo