Angular中的Visual Studio代码：无法读取未定义的属性，如何解决？

Question

如何在Angular中获取任何数据类型并将其转换为已知数据类型？

我下面有一项服务，正在接收一些服务数据，并想转换为具有{productId: int; productName: string;}的productDataClass

至少，我至少想要productId，它是一个整数。

发送与此资源相似的数据，

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

然后我尝试了这个，它不起作用copyFromMessage是any类型，

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

错误：

无法读取未定义的属性'productName'

基本服务：

export class ProductService{

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

  constructor() { }

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

也在此资源中查找：Observable type error: cannot read property of undefined

实际项目的屏幕截图：

CurrentMessage具有实际数据，以下几行显示未定义，

[''value']仍然显示错误

Answer 1

签出此StackBlitz Link

您的productDataClass是

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

• 您的服务是>>

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

• 在app.component.ts

中，您可以在单击按钮时调用changeMes​​sage（）的方法。

   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 2

这是一个JavaScript运行时错误。

Answer 3

Visual Code Debugger Chrome扩展程序存在问题。可以在代码行之间使用命令debugger，调试器值将正确显示。这篇文章中的所有其他答案也都有效。