Angular 6 - null，undefined check not working -ERROR TypeError：无法读取未定义的属性“Region”

Question

此Kendo-dropdownlist存在于Kendo Grid列中。

 <kendo-dropdownlist [data]="regions"
                     [textField]="'Region'"
                     [value]="'RegionMasterID'"
                     [formControl]="formGroup.get('Region')"
                     [filterable]="true"
                     (valueChange)="handleRegionChange($event, dataItem)"
                     (filterChange)="handleRegionFilter($event)">

 </kendo-dropdownlist>

这是组件代码：

handleRegionChange(value: any, dataItem: any) {

 if ((dataItem.Region !== null || dataItem.Region !== undefined) && value.Region) {
            this.SelectedRegion = value.Region;
            dataItem.Region = value.Region;
            dataItem.RegionMasterID = value.Region == "" ? '' : value.RegionMasterID;
        }
        else {
            this.SelectedRegion = '';
            dataItem.Region = '';
            dataItem.RegionMasterID = '';
        }

        this.update(dataItem);
    }

在handleRegionChange事件中，我正在尝试检查用户是否进行了任何选择。如果是，则if-block否则阻止。如果用户单击下拉列表并且未进行任何选择，则dataItem.Region为null，但不是执行else块，而是在控制台中抛出错误：

ERROR TypeError: Cannot read property 'Region' of undefined

请指导如何解决此问题

Answer 1

在尝试访问其属性之前，您需要检查dataItem是否存在，这应该有所帮助。在开始时将其添加到您的if语句中。

if (dataItem && (dataItem.Region !== null || dataItem.Region !== undefined) && value.Region)

如果dataItem不是真的并且尚未通过，那么这应该直接跳转到else块。

问题是尝试访问不存在的属性。像undefined.Region一样，在检查值的undefined时会出现错误。 &&将确保dataItem在访问之前是真实的（有一个值）。这样，如果dataItem.Region不存在，就永远无法检查dataItem。

看看文档，我认为你只能通过$event作为唯一的参数。如果所有值都是唯一的并且不会重新出现，那么您可以尝试。

(valueChange)="handleRegionChange($event)"

public handleRegionChange(value) 
{
    let selected = this.regions.find(item => item.value === value);
    if (selected)
    { // your code. }
    else 
    { // your code. }
}