Accessing visible template link inside template element?

How to select the item that is currently displayed

My attempt was like this:

app.component.html

 <ScrollView>
    <StackLayout>
      <StackLayout width="100%" *ngFor="let item of images$">
          <Image #image [src]="item.url" stretch="aspectFill" colSpan="3" row="0"></Image>
      </StackLayout>
    </StackLayout>
  </ScrollView>

      

        
        
        
      

    

app.component.ts

   @ViewChildren('image') image: QueryList<Image>;
   ngAfterViewInit(): void {
     this.image.changes.subscribe((changes) => {
       alert("current:" + this.image.toArray()[0]);
       alert("current:" + this.image.toArray()[0].src);
      }
     );
   }

      

        
        
        
      

    

It only announces once.

Basically, the goal is to trigger the API displayed with an image when scrolling to the position of the element in question.