Dictionary object with Observable: Cannot read property 'next' of undefined

Issue

 isEnabledDeleteCourtChanged$: { [courtId: string]: Observable<boolean> };

 private isEnabledDeleteCourtSubject$: { [courtId: string]: BehaviorSubject<boolean> };

 private initialize(): void {

  this.isEnabledDeleteCourtSubject$= new BehaviorSubject<boolean>(false); // here has problem
  this.isEnabledDeleteCourtChanged$ = this.isEnabledDeleteCourtSubject$.asObservable(); // here has problem
}

 setIsEnabledDeleteCourt(courtId: string, isEnabled: boolean): void {

    this.isEnabledDeleteCourtSubject$[courtId].next(isEnabled); // here has problem
}

The above code is not working. It says Cannot read property 'next' of undefined. So can you tell me how to construct the Dictionary object with Observable properly? Initializing is also not working? i.e. initialize()

Solution

Here we cannot declare/init it without courtId. So this works for me.

service.ts

isEnabledRevertToGroupChanged$: { [courtId: string]: Observable<boolean> } = {};

private isEnabledRevertToGroupSubject$: { [courtId: string]: BehaviorSubject<boolean> } = {};

setIsEnabledDeleteCourt(courtId: string, isEnabled: boolean): void {

        this.isEnabledDeleteCourtSubject$[courtId] = new BehaviorSubject<boolean>(false);

        this.isEnabledDeleteCourtSubject$[courtId].next(isEnabled);

        this.isEnabledDeleteCourtChanged$[courtId] = this.isEnabledDeleteCourtSubject$[courtId].asObservable();
    }

html

 <ion-col *ngIf="queueDataService?.isEnabledDeleteCourtChanged$[queue?.qId] | async">
 </ion-col>

Answered By - Sampath