Question

单击Search button会从服务中填充一个Ag-grid，这会调用API。我正在使用map()函数从原始API对象创建一个新对象。创建新对象时，是否从原始文件中过滤和格式化必需的属性？然后将新对象设置为用于数据填充的网格。

问题：当我第一次单击“搜索”按钮时，尽管网络显示了正确的数据提取，但由于以下错误，UI并未填充任何内容：

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

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

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。

Answer 1

当数据可用时，您应该操作数据，例如：-

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

尝试

Answer 2

您需要将.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下载数据时向用户启用或禁用加载程序/微调器指示。

TypeError：无法读取未定义<Angular 8>

2 个答案: