Cannot Read Property 'Subscribe' of Undefined Angular 7

Question

I'm having an issue passing in the values for my actionmenuline. The actionmenuline value is passing in undefined and i'm unsure of what's going on.

The service is passing in the correct code for the first value but not the second value. I'm wondering if I'm doing something wrong in the getAction call that's not getting the correct object.

This is the error i'm getting: -->

Cannot read property 'subscribe' of undefined at new ActionViewComponent (actionview.component.ts:68) which line 68 is pointing to this.actionMenuSubscription

Action View Component

export class ActionViewComponent implements OnInit, OnDestroy {

    // User Fields
    currentUser: User;
    users: User[] = [];
    currentUserSubscription: Subscription;


    // Menu Lines
    currentActionMenuLine: ActionMenuLine;
    actionMenuLines: ActionMenuLine[] = [];
    actionMenuSubscription: Subscription;

    dataSource: any = new MatTableDataSource(ACTION_DATA);

    constructor(
        private authenticationService: AuthenticationService,
        private actionService: ActionService,
        private menuService: MenuService,
    ) {
        this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
          this.currentUser = user;
        });

        this.actionMenuSubscription = this.menuService.currentActionMenuLine.subscribe(actionmenuline => {
          this.currentActionMenuLine = actionmenuline;
        });
    }

   public getActions() {
      this.actionService.getAction(this.currentUser, this.currentActionMenuLine).
      subscribe((data: any) => {
          this.dataSource = data;
        });
    }

}

Action Service

export class ActionService {

  public apiURL = 'http://localhost:15217/api/actions/launchaction';
  public currentUser: Observable<User>;
  public currentAction: Observable<Action>;
  private currentActionSubject: BehaviorSubject<Action>;
  public ActionMenuLine: Observable<ActionMenuLine>;


    constructor(private http: HttpClient) {
      this.currentActionSubject = new BehaviorSubject<Action>(JSON.parse(localStorage.getItem('currentAction')));
      this.currentAction = this.currentActionSubject.asObservable();
    }
      // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

  getAction( user: User, actionmenuline: ActionMenuLine) {
      return this.http.post<User[]>(this.apiURL,
        {
            SessionID:  user.userEnv.sessionId,
            ActionTag: actionmenuline.targetActionTag
       })
        .pipe(
          retry(1),
          catchError(this.handleError)
        );
  }

Menu Service

export class MenuService {

public currentUser: Observable<User>;
private currentActionMenuLineSubject: BehaviorSubject<ActionMenuLine>;
public currentActionMenuLine: Observable<ActionMenuLine>;
ActionMenuSubscription: any;

constructor(private http: HttpClient) { }

loadActionMenu(user: User): Observable<ActionMenuLine[]> {
    return this.http.get<ActionMenuLine[]>(`/menu/getlines/`, {
        params : {
            userId: user.id,
            sessionId: user.userEnv.sessionId
        }
    }).pipe(map( MenuLines => {
        return this.debugLines(MenuLines) as ActionMenuLine[];
    }));
}

debugLines(lines: ActionMenuLine[]){

    let i:number = 0;
    let kids:ActionMenuLine[];

    for( let i:number = 0; i< lines.length; i++ ){
        let j:ActionMenuLine = lines[i];
        kids = j.children;
    }

    return lines;
}

loadAboutSyntelic():Observable<string[]> {
    return this.http.get<string[]>('usersettings/aboutsyntelic/').pipe(map( AboutSyntelic => {
        return AboutSyntelic as string[];
    }));
}

loadMimic(sessionId: string):Observable<string[]> {
    return this.http.get<string[]>("usersettings/mimicdata/",{
        params: {
            sessionId: sessionId
        }
    }).pipe(map(ids => ids as string[]));
}

mimic(userId: string, sessionId: string){
    return this.http.get<any>("usersettings/mimic/",{
        params : {
            userId: userId,
            sessionId: sessionId
        }
    }).pipe(map( res => {
        return res as User
    }));
}

Answer 1

currentActionMenuLine is defined in MenuService but with no value assigned in entire class.

MenuService.ts

public currentActionMenuLine$: Observable<ActionMenuLine>;

The service is passing in the correct code for the first value but not the second value.

That's because maybe you are assigning a value to it in AuthenticationService, which not presented in your question.

check your AuthenticationService class and do the same here for currentActionMenuLine(add the initial value).

P.S:

Generaly we use $ symbol at the end of variable name for Observables.

Answer 2

There's no code to initialize the currentActionMenuLine in the menuService. You have typed it as an Observable but it won't have any effect at runtime as the value is still undefined.

Answer 3

Modify your service to

getAction( user: User, actionmenuline: ActionMenuLine): Observable<any> {
      return this.http.post<User[]>(this.apiURL,
        {
            SessionID:  user.userEnv.sessionId,
            ActionTag: actionmenuline.targetActionTag
       })
  }

instead of adding pipe to service use it in your component, and in your component

public getActions() {
  this.actionService.getAction(this.currentUser, this.currentActionMenuLine)
    .pipe(retry(1))
    .subscribe((data: any) => {
         this.dataSource = data;
   });
}