Question

Angular - 多选下拉列表 - TypeError：无法读取未定义的属性“长度”

2020-10-30

1688

javascript angularjs angular

counter: number = 0;
  getDatatypes(){
    if(this.counter == 0) {
      if(this.appId != 0)
      {
        if(undefined != this.datatypes && this.datatypes.length)
          for (let i = 0; i < this.datatypes.length; i++) {
            this.applicationDataType = new ApplicationDataType(this.route.snapshot.params.id, this.datatypes[i].dataTypeId, this.datatypes[i].description, false);
            let datatype = this.checkedDatatypes.find(y => y.description === this.datatypes[i].description);
            if (datatype) {
              this.applicationDataType.checked = true;
              this.applicationDataTypes.push(this.applicationDataType);
            } else {
              this.applicationDataType.checked = false;
              this.applicationDataTypes.push(this.applicationDataType);
            }
        }
      } else {
        for(let i = 0; i < this.datatypes.length; i++){
          this.applicationDataType = new ApplicationDataType(this.route.snapshot.params.id, this.datatypes[i].dataTypeId, this.datatypes[i].description, false);
          this.applicationDataTypes.push(this.applicationDataType);
        }
      }
      this.counter ++;
    }
  }

这一行

if(undefined != this.datatypes && this.datatypes.length)

给出了 TypeError: Cannot read property 'length' of undefined 。

这是我收到的控制台错误

这些错误对用户不可见，并且不会影响功能。我已经尝试了所有方法，但前端多选下拉列表中的数据类型总是消失。我尝试过初始化数据类型：Datatype[] = []，用 if(this.datatypes && this.datatypes.length) 包装我的 for 循环，并使用 ?。这些只会在运行前端时使多选下拉列表为空。

Answer 1

看起来 this.datatypes 不是数组或为空，您可以使用 ? 忽略此错误。

请将其更改为 if(this.datatypes?.length>0)

Answer 2

您能否尝试如下操作？初始化 dataTypes 数组，然后用 forEach 替换 for 循环，如下所示

counter: number = 0;
  datatypes = [];
  getDatatypes(){
    if(this.counter == 0) {
      if(this.appId != 0)
      {
        this.datatypes.forEach(dtype => {
          this.applicationDataType = new ApplicationDataType(this.route.snapshot.params.id, dtype.dataTypeId, dtype.description, false);
            let datatype = this.checkedDatatypes.find(y => y.description === dtype.description);
            if (datatype) {
              this.applicationDataType.checked = true;
              this.applicationDataTypes.push(this.applicationDataType);
            } else {
              this.applicationDataType.checked = false;
              this.applicationDataTypes.push(this.applicationDataType);
            }
        })
      } else {
        this.datatypes.forEach(dtype => {
          this.applicationDataType = new ApplicationDataType(this.route.snapshot.params.id, dtype.dataTypeId, dtype.description, false);
          this.applicationDataTypes.push(this.applicationDataType);
        })
      }
      this.counter ++;
    }
  }