Цикл через Angular QueryList - PullRequest
0 голосов
/ 06 мая 2020

Итак, я хочу получить все изображения в моем компоненте в массиве, поэтому я использую Angular s @ViewChildren, который возвращает QueryList из ElementRef:

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

Однако, когда я когда-либо пытаюсь просмотреть список oop, мне кажется, что я не могу получить nativeElement. Я вызываю это в ngAfterViewInit()

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

Я ничего не получаю в console.log, никаких ошибок нет.

Это, в свою очередь, работает:

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

Ниже приведено изображение журнала console.log("this.images", this.images):

enter image description here

Здесь 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>

Что мне не хватает?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...