TypeError：无法读取未定义的属性“地图”<Angular 8>答案

【问题标题】：TypeError: Cannot read property 'map' of undefined<Angular 8 >TypeError：无法读取未定义的属性“地图”<Angular 8>
【发布时间】：2020-02-22 21:22:32
【问题描述】：

点击Search button，我有一个从服务填充的ag-grid，它调用API。我正在使用 map() 函数从原始 API 对象创建一个新对象。创建新对象时是否过滤和格式化所需的原始属性？然后将新对象设置为数据填充的网格。

问题：当我第一次单击“搜索”按钮时，虽然网络显示正确的数据获取，但由于错误，UI 中没有填充任何内容：

TypeError：无法读取未定义的属性“地图”。

在第二次点击期间，数据完美地填充到网格中。请注意，第二次点击不会导致此错误。

this._reportersService.getReporters()
            .subscribe(         
                    (data=> this.reporters = data),                       
                    (error => {
                                console.log(error);
                                this.errBlock = true;
                                this.errText = error.message;
                              })
                    )
            var res = {
                gridReporters: this.reporters.map(function(v) {
                  var fullName = v.TITLE+' '+v.FIRST_NAME+' '+v.MIDDLE_NAME+' '+v.LAST_NAME;
                  var address = v.STREET+' '+v.CITY+' '+v.STATE
                  return {
                    FULLNAME: fullName,
                    ADDRESS:address,
                    COUNTRY:v.COUNTRY,
                    POSTCODE:v.POSTCODE,
                    PHONE:v.PHONE,
                    EMAIL:v.EMAIL,
                    QUALIFICATION:v.QUALIFICATION,
                    INSTITUTION:v.INSTITUTION,
                    DEPARTMENT:v.DEPARTMENT
                  };
                })    


}
  var objString = JSON.stringify(res);
  objString = objString.split('{"gridReporters":').join('');
  objString = objString.split('}]}').join('}]');
  console.log("last str:"+objString);
   this.reporterGridOptions.rowData = JSON.parse(objString);
  this.reporterGridOptions.api.setRowData(this.reporterGridOptions.rowData);
}

另外，请注意：

public reporters: Reporters[] ;

export class Reporters {
    REPORTER_ID: string;
    CLIENT_ID: string;
    TITLE: string;
    FIRST_NAME: string;
    MIDDLE_NAME:string;
    LAST_NAME: string;
    STREET: string;
    CITY: string;
    STATE: string;
    COUNTRY: string;
    PHONE: string;
    EMAIL: string;
    INSTITUTION: string;
    DEPARTMENT: string;
    QUALIFICATION: string;
    CREATED_BY:string;
    CREATED_DATE:Date;
    IS_PRIMARY_CONTACT:number;
    POSTCODE:string;
    STATUS:string;
    UPDATED_BY:string;
    UPDATED_DATE:string;
    }

所有相关代码都已附上，请帮助我。提前致谢。 ASJ。

【问题讨论】：

因为在你的map()被执行的时候this.reporters是未定义的，因为subscribe中的数据还没有到达

标签： angular

【解决方案1】：

您需要将 .map() 的代码放入成功阶段的最后阶段。像这样。。

 .subscribe(
    data => {
      this.reporters = data;
      this.isWait = true;
    },
    err => {
      this.errorMessage = err;
      this.isWait = false;
    }  ,
    () =>  {  this.isWait = false;
                  // Your this.reporters.map() code goes here.
              }
  );

subscribe() 的第一阶段是获取 api 数据并将其传递给您的记者属性。

从 api 调用数据时发生的任何错误处理的第二阶段。

第三阶段是成功阶段。仅在成功调用第一阶段时调用。因此，您的记者财产现在拥有您需要的所有数据。

这里注意，isWait 是布尔属性，用于在从 api 下载数据耗时时向用户启用或禁用 Loader/Spinners 指示。

【讨论】：

【解决方案2】：

您应该在数据可用时对其进行操作，例如：-

const res;
this._reportersService.getReporters()
        .subscribe(         
                (data=> {this.reporters = data;
                 res = {
            gridReporters: this.reporters.map(function(v) {
              var fullName = v.TITLE+' '+v.FIRST_NAME+' '+v.MIDDLE_NAME+' '+v.LAST_NAME;
              var address = v.STREET+' '+v.CITY+' '+v.STATE
              return {
                FULLNAME: fullName,
                ADDRESS:address,
                COUNTRY:v.COUNTRY,
                POSTCODE:v.POSTCODE,
                PHONE:v.PHONE,
                EMAIL:v.EMAIL,
                QUALIFICATION:v.QUALIFICATION,
                INSTITUTION:v.INSTITUTION,
                DEPARTMENT:v.DEPARTMENT
              };
            }) 
           }
          } 
                 ),                       
                (error => {
                            console.log(error);
                            this.errBlock = true;
                            this.errText = error.message;
                          })
                )

试试这个

【讨论】：