javascript - 为项目列表正确声明 Observable

Question

.html//根据错误问题出在HTML代码上

<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();
  }

运行时错误://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)

你能告诉我如何为项目列表正确声明 Observable 吗？

Answer 1

您应该初始化eventPhotoUrl$:

eventPhotoUrl$: { [id: string]: Observable<SafeResourceUrl> } = {};