Looping through Angular QueryList

问题

So I want to get all the images in my component in an array, so I am using Angular's @ViewChildren which returns a QueryList of ElementRef:

@ViewChildren('img', { read: ElementRef }) images: QueryList<ElementRef>;

However, when ever I try to loop through the list am can't ever seem to get hold of the nativeElement. I am calling this in ngAfterViewInit()

this.images.forEach((img, index) => console.log("Image", img.nativeElement));

I don't get anything in the console.log, no error nothing.

This in turn does work:

console.log("this.images", this.images);

Below is an image of the log of console.log("this.images", this.images):

Here the html:

<div class="swiper-slide" *ngFor="let exhibit of exhibits; let i = index">
   <app-exhibit-images exhibitImagesId="{{ exhibit.fields.eventImages[0].sys.id }}" [eventPicturesStart]="eventPicturesStart" (sendEndEventPictures)="getEndEventImages($event)"></app-exhibit-images>
   <div id="exhibit-{{i}}"class="gallery__content" [ngClass]="{'show-event-pictures' : eventPicturesStart}">
      <div class="gallery__poster" [ngClass]="{'gallery-expand' : isGalleryExpanded }">
         <figure class="poster__image">
            <picture>
               <source srcset="{{ exhibit.fields.photo.fields.file.url }}" type="img/png">
               <img #img src="{{ exhibit.fields.photo.fields.file.url }}" alt="{{ exhibit.fields.photo.fields.description }}">
            </picture>
         </figure>
      </div>
      <div class="gallery__text" [ngClass]="{'gallery-expand' : isGalleryExpanded }">
         <button class="gallery-expand-button" (click)="expandGallery()"></button>
         <h2 class="gallery__heading">{{ exhibit.fields.title }}</h2>
         <h3 class="gallery__subheading">{{ exhibit.fields.subTitle }}</h3>
         <h4 class="gallery__artist">{{ exhibit.fields.artist }}</h4>
         <p class="gallery__description" *ngIf="exhibit.fields.description">{{ exhibit.fields.description }}</p>
      </div>
   </div>
</div>

What am I missing?

来源：https://stackoverflow.com/questions/61629180/looping-through-angular-querylist

标签

javascript

angular

typescript

loops