Question

我有这样的TypeScript模型：

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

填充此模型的

和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(",");
    }

每当我调用此函数时，我都会收到错误：

＆＃34; TypeError：无法读取属性＆＃39; split＆＃39;未定义＆＃34;

但是当我改变功能的主体时，就像这样：

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

然后传送正常，分割功能正常工作。你有任何想法为什么检查成分是否为空修复它？我必须管理我只是用js和ts开始我的冒险。感谢

UPDATE 我在这里实例化了这个Product变量：

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

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

这就是我调用getIngredients函数的方法

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

Answer 1

您获得的TypeError是在运行时引发的JavaScript错误，与TypeScript无关。这是因为this.product.ingredients未定义。您的“修复”有效，因为JavaScript中undefined == null为true，导致getIngredients()内的早期返回。如果您使用===运算符与null进行比较，则您的修补程序将不再有效。

然而，问题是为什么this.product.ingredients未定义？可能是因为this内的TypeScript getIngredients()上下文丢失了。从您提供的代码中无法确定是否是这种情况，但有关Github上'this' in TypeScript文章中有关该问题的详细说明可能有助于您解决问题。一个简单的第一次检查可能是在console.log(this)内添加getIngredients()，以查看this到底是什么。

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

1 个答案: