Question

我有一个组件，用于显示数据，它来自后端。

这里是显示数据的功能

 getData() {
    this.propertyService.getPropertyForEdit(Number(this.activatedRoute.snapshot.params['id'])).subscribe(r => {
        this.property = r;
        this.tabTemplates = [
            { title: this.l('Addresses'), template: this.addressesTemplateRef },
            { title: this.l('Site'), template: this.siteTemplateRef}
        ];
        this.propertiesToDisplay = [
            { displayName: this.l('PropertyTitle'), value: this.property.propertyTitle.name},
            { displayName: this.l('Landlord'), value: this.property.landlord.name},
            { displayName: this.l('Agent'), value: this.property.agent.name },
            { displayName: this.l('BuildingType'), value: this.property.buildingType.name }
        ];
    });
}

在此行value: this.property.landlord.name}的值可以为空。

所以当它为null时，我会出错

无法读取未定义的属性“名称”

我该如何解决？

Answer 1

所以当它为null时，我会出错

无法读取未定义的属性“名称”

不，不是null，而是undefined，这是不同的。

因为this.property.landlord是undefined，所以引发了错误。在javascript中，尝试访问name的属性（在这种情况下为undefined）会引发 TypeError 。

要解决此问题（这不是问题，而是一个案例），您应该使用 fallbacks 检查该财产的祖先是否存在。在这种情况下，我将以这种方式处理：

{ displayName: this.l('Landlord'), value: (this.property && this.property.landlord && this.property.landlord.name) ? this.property.landlord.name : 'N/A'},

这段代码专门是：

this.property && this.property.landlord && this.property.landlord.name

将断言name的每个祖先都存在。如果这些都不是，它将返回“ N / A”而不会引发任何异常。

Answer 2

使用三元运算符：

value: (this.property.landlord ? this.property.landlord.name : "defaultValue")

Answer 3

问题在于房东的财产是null(undefined)。您可以使用三元运算符直接处理null检查。

value: (this.property.landlord) ? this.property.landlord.name : null

Answer 4

在分配值时使用三元条件。像这样

{ displayName: this.l('PropertyTitle'), value: (this.property.propertyTitle.name) ? this.property.propertyTitle.name: null},

如果为空（JS），则不显示任何内容

4 个答案: