.html // based on the error message, the issue seems to be in the HTML code
<ion-card *ngFor="let invitedEvent of invitedEvents">
<ion-card-content>
<img [src]="eventPhotoUrl$[invitedEvent.id] | async">
</ion-card-content>
</ion-card>
.ts
eventPhotoUrl$: { [id: string]: Observable<SafeResourceUrl> };
ngOnInit(){
this.eventPhotoUrl$[eventId] = this.photoService.eventPhotoObservable(eventId);
}
photoService.ts
private eventPhotoSubjects: { [id: string]: BehaviorSubject<SafeResourceUrl> } = {};
eventPhotoObservable(eventId: string): Observable<SafeResourceUrl> {
if (!this.eventPhotoSubjects[eventId]) {
const eventSubject: BehaviorSubject<SafeResourceUrl> = new BehaviorSubject<SafeResourceUrl>(PhotoPlaceholderPathConstant.EVENT_PHOTO_PLACEHOLDER_URL);
this.eventPhotoSubjects[eventId] = eventSubject;
this.afs.doc<ImagePathModel>(`eventDisplayPhotos/${eventId}`).valueChanges()
.subscribe(async () => {
const userIdToken: string = await this.auth.getUserIdToken();
const photoResponse: PhotoResponseModel = await this.getEventPhoto(userIdToken, eventId);
this.eventPhotoSubjects[eventId].next(this.sanitizer.bypassSecurityTrustResourceUrl(photoResponse.dataUrl));
});
}
return this.eventPhotoSubjects[eventId].asObservable();
}
Run time Error: // s68VRWM3T7KZyrrurMyz = eventId
HomePage.html:66 ERROR TypeError: Cannot read property 's68VRWM3T7KZyrrurMyz' of undefined
at Object.eval [as updateRenderer] (HomePage.html:88)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
at checkAndUpdateView (core.js:38382)
at callViewAction (core.js:38742)
at execEmbeddedViewsAction (core.js:38699)
at checkAndUpdateView (core.js:38377)
at callViewAction (core.js:38742)
at execEmbeddedViewsAction (core.js:38699)
at checkAndUpdateView (core.js:38377)
at callViewAction (core.js:38742)
Could you please advise on the correct way to declare Observables for a list of items?