Visual Studio Code in Angular: Cannot read property of undefined, How Do I fix?

Question

How do I take datatype of any in Angular and convert to known data type?

I have a service below, receiving some service data, and want to convert to productDataClass which has {productId: int; productName: string;}

At the very least, I at least want productId which is an integer.

Sending data similar to this resource,

https://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

public productDataClass: ProductDataClass;

this.productService.currentMessage.subscribe(currentMessage => {
  this.productDataClass = currentMessage

I then tried this, which is not working copyFromMessage is any type,

this.productService.currentMessage.subscribe(currentMessage => {
  this.copyFromMessage = currentMessage;
  this.productData = this.copyFromMessage.value;
  this.testString= this.productData.productName;

Error:

Cannot read property 'productName' of undefined

Basic Service:

export class ProductService{

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

Looking in this resource also: Observable type error: cannot read property of undefined

Screenshot of actual items:

CurrentMessage has actual data, following lines show undefined,

['value'] is still giving error

Answer 1

This is a javascript runtime error.

The changeMessage() is not called with an object of this structure {value: {productName: ...}}

Answer 2

checkout this StackBlitz Link

your productDataClass is

export class Productdataclass {
       productId: number;
       productName: string;

     get _productId() {
         return this.productId;
     }
     set _productId(id:number){
        this.productId = id;
     }
    get _productName(){
        return this.productName;
    }
    set _productName(name: string){
       this.productName = name;
    }
} 

• Your Service is

      import { Injectable } from '@angular/core';
      import { Subject } from 'rxjs';
  
      @Injectable()
      export class DataService {
             private messageSource = new Subject();
             currentMessage = this.messageSource.asObservable();
             constructor() { }
             changeMessage(currentMessage) {
                 this.messageSource.next(currentMessage);
             }
  
       }
  

• In app.component.ts , you can call method of changeMessage() here in button click.

     export class AppComponent  {
  
          public productDataClass: Productdataclass =new Productdataclass();
          public copyFromMessage: Productdataclass = new Productdataclass();
          public testString : string;
  
          constructor(private data: DataService){ }
  
          ngOnInit(){
               this.productDataClass._productId = 1 ;
               this.productDataClass._productName='toothBrush';
               this.data.currentMessage.subscribe(data =>{
                        console.log(data)
                        this.copyFromMessage = data['value'];
                        this.testString = this.copyFromMessage.productName;
                        console.log(this.testString);
               })
         }
         call(){    
            this.data.changeMessage( {value:this.productDataClass} )
         }
    } 
  

Answer 3

There is a problem with Visual Code Debugger Chrome Extension. One can use command debugger between line of codes, and the debugger values will display properly. All other answers in this post are also valid.

this.productService.currentMessage.subscribe(currentMessage => {
  this.copyFromMessage = currentMessage;
  debugger;
  this.productData = this.copyFromMessage.value;
  this.testString= this.productData.productName;

In this line of code, Chrome Extension thought for some reason .this is referring to the subscription rather than the class component.

You can use _this to access the class component.