Angularjs TypeScript String.split（）函数的奇怪行为

我有这样的类型脚本模型：

export class Product {
    id:number;
    name:string;
    brand:Brand;
    price:number;
    shippingPrice:number;
    description:string;
    photoName:string;
    productType:ProductType;
    purchaseCounter:number;
    rating:number;
    volume:string;
    ingredients:string;
}

public getIngredients():String [] {
    if (this.product.ingredients == null) {
        return null;
    }
    return this.product.ingredients.split(",");
}

和填充此模型的json文件：

{
  "id": 1,
  "name": "xxx",
  "description": "xxx",
  "price": 12.34,
  "purchaseCounter": 12,
  "photoName": "xx",
  "shippingPrice": 12.99,
  "volume": "xxx",
  "rating": 4.7,
  "ingredients": "A,B,C",
  "brand": {
    "id": 1,
    "name": "xx"
  },
  "productType": {
    "id": 3,
    "name": "xxx"
  }
}

现在在我的TypeScript组件中，我有如下功能：

public getIngredients():String [] {
        return this.product.ingredients.split(",");
    }

每次调用此函数时，我都会出现错误：

“TypeError:无法读取未定义的属性'split'”

但当我把函数体改成这样的时候：

export class Product {
    id:number;
    name:string;
    brand:Brand;
    price:number;
    shippingPrice:number;
    description:string;
    photoName:string;
    productType:ProductType;
    purchaseCounter:number;
    rating:number;
    volume:string;
    ingredients:string;
}

public getIngredients():String [] {
    if (this.product.ingredients == null) {
        return null;
    }
    return this.product.ingredients.split(",");
}

然后一切正常，分割函数正常工作。你知道为什么要检查成分是否为空吗？我必须告诉管理员，我刚开始我的冒险与js和ts。谢谢

更新 我在这里实例化此产品变量：

export class ProductOverviewComponent implements OnInit {
    private product:Product;
    private errorMessage:string;

    constructor(private productService:ProductService) {
        this.product = new Product();
    }

    ngOnInit():void {
        this.productService.getProduct()
            .subscribe(
                product => this.product = product,
                error => this.errorMessage = <any>error);
    }
}

导出类ProductOverview组件实现OnInit{
私人产品：产品；
私有错误消息：字符串；
构造函数（私有产品服务：产品服务）{
this.product=新产品（）；
}
ngOnInit（）：void{
this.productService.getProduct（）
.订阅(
product=>this.product=product，
error=>this.errorMessage=error）；
}
}

现在我点击json文件，但将来我会点击服务器。另一个想法是我使用@Input（）将产品传递给另一个组件

这就是我如何调用getComponents函数的

<div class="col-md-12">
        <div class="property-text">
            <!--<h3 class="h3style">Ingredients</h3>-->
            <ul>
                <li *ngFor="let ingredient of getIngredients()">
                    {{ ingredient }}
                </li>
            </ul>

        </div>
    </div>

您得到的

TypeError

是运行时引发的JavaScript错误，与TypeScript无关。这是因为

此.product.components

未定义。您的“修复”之所以有效，是因为在JavaScript中，

undefined==null

是

true

，这导致在

getComponents（）中提前返回。如果使用
==
运算符与
null
进行比较，则修复程序将不再有效

然而，问题是为什么
这个.product.components
没有定义？这可能是因为TypeScript
此
上下文在
getComponents（）
中丢失。从您提供的代码中，不可能确定是否是这样，但是在Github上的文章中有一篇关于这个问题的文章，它可能会帮助您解决问题。一个简单的第一个检查可以是在
getComponents（）
中添加
console.log（this）
，看看这
到底是什么。
您得到的
TypeError
是运行时引发的JavaScript错误，与TypeScript无关。这是因为
此.product.components
未定义。您的“修复”之所以有效，是因为在JavaScript中，
undefined==null
是
true
，这导致在
getComponents（）中提前返回。如果使用
==
运算符与
null
进行比较，则修复程序将不再有效

然而，问题是为什么
这个.product.components
没有定义？这可能是因为TypeScript
此
上下文在
getComponents（）
中丢失。从您提供的代码中，不可能确定是否是这样，但是在Github上的文章中有一篇关于这个问题的文章，它可能会帮助您解决问题。一个简单的第一个检查可以是添加
console.log（this）
到
getcomponents（）
中，看看
这个
到底是什么。
您如何用数据实例化这个
产品
类？您如何调用
getComponents
？如何用数据实例化此
产品
类？您如何调用
GetComponents
？