Angular同组件内更新Input值报undefined错误的解决方法

错误信息 #

ERROR
Error: Cannot read properties of undefined (reading 'pop')

相关代码 #

export class TableComponent implements OnInit {
@Input() names: any;

constructor() {}

ngOnInit() {}

testFn() {
  this.names.pop('Test22');
  this.names = [...this.names];
  console.log(this.names);
}

}

解决方案 #

1. 给@Input属性设置默认值，避免undefined #

names输入属性未被父组件传递有效值时会处于undefined状态，直接调用数组方法会报错。给它设置默认空数组：

@Input() names: any[] = [];

2. 修正pop()方法的错误使用 #

Array.pop()方法不需要传入参数，它的作用是删除数组最后一个元素并返回该元素。如果要删除值为'Test22'的元素，可使用以下两种方式：

• 使用filter()创建新数组（推荐，不修改原数组）：

  testFn() {
    this.names = this.names.filter(item => item !== 'Test22');
    console.log(this.names);
  }
  

• 或者使用splice()修改原数组：

  testFn() {
    const targetIndex = this.names.findIndex(item => item === 'Test22');
    if (targetIndex !== -1) {
      this.names.splice(targetIndex, 1);
      // 若需强制触发变更检测，可重新赋值
      this.names = [...this.names];
    }
    console.log(this.names);
  }
  

3. 最佳实践：使用内部变量处理输入数据 #

遵循Angular单向数据流原则，若子组件需要修改输入数组，建议复制一份到内部变量，避免直接修改@Input属性：

export class TableComponent implements OnInit {
  private _internalNames: any[] = [];
  @Input() set names(value: any[]) {
    // 接收父组件传递的值，复制到内部变量
    this._internalNames = value ? [...value] : [];
  }

  constructor() {}

  ngOnInit() {}

  testFn() {
    // 修改内部变量
    this._internalNames = this._internalNames.filter(item => item !== 'Test22');
    console.log(this._internalNames);
  }
}

内容的提问来源于stack exchange，提问作者EMahan K