Wywołanie funkcji po zakończeniu * ngFor

Question

Próbuję utworzyć aplikację z kątową 2; Chcę po ostatnim elementem świadczonych w * ngFor, wykonać funkcję, coś takiego, znacznik jest <img>:

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

Nazwa funkcji jest

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

Answer 1

Zobacz this Plunker dla rozwiązania udało mi się wymyślić .

To może nie być eleganckie, ale działa (głównie)!

Zasadniczo, *ngFor pomaga handful of values, podobnie jak indeks, parzysty, nieparzysty i na szczęście pierwszy i ostatni bajt, który jest prawdziwy dla odpowiednich iteracji. Najpierw musisz wystawić wartości jako zmienne lokalne w *ngFor dokładnie tak samo, jak indeks. Następnie musisz uzyskać Angular, aby wywołać funkcję z szablonu, co możesz zrobić tak, jakbyś wiązał wartość do szablonu, ale z trzeciorzędnym warunkiem (który zwraca wartość null dla fałszywych ocen).

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

mówię „(w większości) działa”, ponieważ wydaje się, że jeśli starają się powiązać z właściwością wewnątrz -ED elementu *ngFor, inny niż ten, który jest powtarzanie a następnie zmienić wartość wspomniana właściwość wewnątrz funkcji wywoływanej w ostatniej iteracji, dostaniesz niepożądane zachowanie i błędy z systemu propagacji zmian Angulara. Zobacz szczegóły Plunkera.

Answer 2

Byłoby lepiej, gdyby można było stworzyć dyrektywę, która zrobi to samo. Musisz tylko przekazać flagę last do dyrektywy i wywoła ona pożądaną funkcję, gdy ostatni element zostanie wyrenderowany.

Zobacz

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

dyrektywa

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 prace odpowiedź, ale trzeba zmienić pisaniu lastElement w SETTI funkcja meout (teraz jest lastElem, więc plunker nie działa, aby sprawdzić, czy jest ostatnim elementem * ngFor)