如何初始化变量以避免“无法读取属性 <variable> undefined”？答案

【问题标题】：How to initialize variable to avoid 'cannot read property <variable> undefined'?如何初始化变量以避免“无法读取属性 <variable> undefined”？
【发布时间】：2021-01-31 15:37:48
【问题描述】：

我正在开发一个角度应用程序。我有一个方法，我试图将值分配给从 API 调用接收到的数据中的变量。代码

this.adminService.getConfigurations(input).subscribe(
    data => {
        this.data_Configuration = data[0];
        this.data_Configuration_e = data[1]     
        this.data_Configuration.forEach(itm => {
            itm.ApplicableDetails = []
            
            this.data_Configuration_e
                .filter(ent => ent.Id == itm.Id)
                .forEach(e => {itm.ApplicableDetails.push(e)});
                        
            itm.ApplicableLevel.FirstFl = itm.ApplicableDetails.some(e => e.Nm == 'First') ? 'Y' : 'N'             
            itm.ApplicableLevel.SecondFl = itm.ApplicableDetails.some(e => e.Nm == 'Second') ? 'Y' : 'N'
        });

我的 data_Configuration 变量是从接口定义的

public data_Configuration : IConfiguraion[] = []

export interface IConfiguration {
  Id: string;
  Nm: string;
  ApplicableLevel?: IApplicableLevels;
  ApplicableDetails?: IDetails [];
}

export interface IApplicableLevels {
    FirstFl?: string;
    SecondFl?: string;
}

当我尝试使用 itm.ApplicableLevel.FirstFl = itm.ApplicableDetails.some(e => e.Nm == 'First') ? 'Y' : 'N' 行将值分配给 FirstFl 时，我收到错误 cannot property FirstFl of undefined。我应该如何或在哪里初始化FirstFl 的值以避免此错误？

【问题讨论】：

该错误并不意味着FirstFl未定义，它意味着itm.ApplicableLevel未定义。您可能希望在分配给它之前插入itm.ApplicableLevel = {};。
接口名为IPrgmConfiguration，但类型定义为IConfiguraion。在发布问题时，我认为这是一个错字？
@MichaelD 是的，这是一个错字。已编辑
{} 是具有命名属性的对象，[] 是具有索引编号元素的数组。
在分配 FirstFl 之前使用itm.ApplicableLevel=itm.ApplicableLevel || {} as IApplicableLevels。当我们使用接口时，有些像 {} 作为 IConfiguration，变量具有接口的所有属性但它们是undefined

标签： javascript angular typescript interface

【解决方案1】：

很可能是 TS Lint 错误，因为 itm.ApplicableLevel 尚未初始化。相反，您可以尝试使用其子属性 FirstFl 和 SecondFl 作为对象来初始化 ApplicableLevel 属性。

您还可以通过在forEach 循环中用if 替换不必要的filter 来跳过data_Configuration_e 数组的额外迭代。

试试下面的

this.data_Configuration.forEach(itm => {
  itm.ApplicableDetails = [];
  
  this.data_Configuration_e.forEach(e => {
    if (ent.Id == itm.Id) {
      itm.ApplicableDetails.push(e);
    }
  });

  itm.ApplicableLevel = <IApplicableLevels>{
    FirstFl: (itm.ApplicableDetails.some(e => e.Nm == 'First')) ? 'Y' : 'N',
    SecondFl: (itm.ApplicableDetails.some(e => e.Nm == 'Second')) ? 'Y' : 'N'
  };
});

【讨论】：