Итак, я хочу получить все изображения в моем компоненте в массиве, поэтому я использую 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)
:
Здесь 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>
Что мне не хватает?