* ngFor

Question

को पूरा करने के बाद एक फ़ंक्शन को कॉल करें मैं कोणीय 2 के साथ एक एप्लिकेशन बनाने की कोशिश कर रहा हूं; मैं चाहता हूँ जब पिछले तत्व * ngFor में गाया, एक समारोह, कुछ इस तरह अमल, टैग <img> है:

<img *ngFor="let image of template.previewImages; let i = index" [src]="image" [class.hs_visible]="i==0" /> 

समारोह नाम

animation(){console.log('enter');} 

Answer 1

समाधान मैं के साथ आने में कामयाब लिए this Plunker देखें है ।

यह सुरुचिपूर्ण नहीं हो सकता है, लेकिन यह (ज्यादातर) काम करता है!

असल में, *ngFor मददगार रूप से handful of values प्रदान करता है, जैसे सूचकांक, यहां तक ​​कि अजीब, और सौभाग्य से पर्याप्त, पहले और अंतिम बूलियन जो संबंधित पुनरावृत्तियों के लिए सत्य का मूल्यांकन करते हैं। सबसे पहले, आपको *ngFor में स्थानीय चर के रूप में मानों को बेनकाब करना होगा जैसा आप इंडेक्स करेंगे। फिर, आपको टेम्पलेट से फ़ंक्शन को कॉल करने के लिए कोणीय प्राप्त करना होगा, जो आप कर सकते हैं जैसे कि आप टेम्पलेट के लिए एक बाध्यकारी थे लेकिन एक तृतीयक सशर्त (जो झूठे मूल्यांकन के लिए शून्य देता है) के साथ।

<div *ngFor="let i of stuff; let l = last "> 
    {{ i }} {{ l === true ? callOnLastIteration() : null}} 
</div> 

मैं कहता हूँ "(अधिकतर) काम करता है" क्योंकि ऐसा लगता है कि अगर आप *ngFor एड तत्व के अंदर एक संपत्ति के लिए बाध्य करने की कोशिश, एक आप पर पुनरावृत्ति कर रहे हैं के अलावा अन्य और उसके बाद का मूल्य बदल अंतिम पुनरावृत्ति पर बुलाए गए समारोह के अंदर संपत्ति ने कहा, आपको अवांछित व्यवहार और कोणीय परिवर्तन प्रसार प्रणाली से त्रुटियां मिलेंगी। विवरण के लिए प्लंकर देखें।

Answer 2

यदि आप एक निर्देश बना सकते हैं तो यह बेहतर होगा जो वही करेगा। आपको निर्देश के लिए last ध्वज पास करने की आवश्यकता है और अंतिम तत्व प्रदान होने पर यह वांछित फ़ंक्शन को कॉल करेगा।

देखें

<p class="my-element" 
    *ngFor="let i of stuff; let l = last" 
    [lastElement]="l" (lastFunc)="test()"> 
    {{i}} 
</p> 

निर्देशक

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core'; 

@Directive({ 
    selector: '[lastElement]' 
}) 
export class LastElementDirective { 
    @Input() lastElement : any; 
    @Output() lastFunc = new EventEmitter(); 
    constructor(private el: ElementRef) { 
    this.setTimer(); //somehow lastElem value is available on next tick 
    } 
    setTimer(){ 
    setTimeout(() => { 
     if(this.lastElem) this.lastFunc.emit(); 
    }, 0);  
    } 
} 

Plunkr in action

Answer 3

Pankay Parkar जवाब काम करता है, लेकिन आप Setti में के लेखन को बदलने के लिए lastElement की जरूरत meout function (अब lastElem है, इसलिए प्लंकर यह जांचने के लिए काम नहीं करता है कि * ngFor का अंतिम तत्व है या नहीं)