TypeScript Getter/Setter数组属性返回错误值问题排查

看起来你遇到的核心问题是：虽然在setter/getter里打印_data是正常的数组，但在其他地方调用this.data.find()时却报错，甚至获取到的是数组长度而非数组本身。结合你的代码逻辑，我梳理了几个可能的原因和对应的修复方案：

可能的问题根源 #

1. @Input参数的时序问题
   Angular的@Input属性（比如你的additionalValues）经常是在组件初始化之后才会被父组件传入（比如父组件异步加载数据后赋值）。这时候你已经设置过data了，但合并逻辑只会在data被赋值时执行一次，不会自动响应additionalValues的后续变化，导致后续获取的data没有合并最新的additionalValues。

2. 未处理空值情况
   如果传入的data是null或undefined，你的setter里直接执行...value会抛出错误，可能导致_data被设置成非数组值（比如null），这时候调用find()自然会报错。

3. 未监听additionalValues的变化
   如果additionalValues后续有更新（比如父组件重新传入新值），当前代码不会重新合并data和新的additionalValues，导致data始终是旧的合并结果。

修复方案 #

方案一：用ngOnChanges监听输入变化 #

通过Angular的生命周期钩子ngOnChanges，监听data和additionalValues的变化，每当其中一个值更新时重新合并数组：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnChanges {
  private _data: any[] = [];
  @Input() additionalValues: any[] = [];

  @Input() set data(value: any[]) {
    // 先处理空值，确保value始终是数组
    const safeData = value ?? [];
    this._data = this.mergeArrays(safeData, this.additionalValues);
  }

  get data(): any[] {
    return this._data;
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 当additionalValues变化时，重新合并数组
    if (changes['additionalValues'] && !changes['additionalValues'].firstChange) {
      // 先从当前_data中移除原来的additionalValues项，避免重复
      const originalData = this._data.filter(item => !this.additionalValues.includes(item));
      this._data = this.mergeArrays(originalData, this.additionalValues);
    }
  }

  // 封装合并逻辑，可按需添加去重
  private mergeArrays(base: any[], additional: any[]): any[] {
    const safeAdditional = additional ?? [];
    // 如果需要去重，用Set处理：return [...new Set([...safeAdditional, ...base])];
    return [...safeAdditional, ...base];
  }
}

方案二：给additionalValues添加setter #

直接给additionalValues设置setter，每当它被赋值或更新时，自动重新合并data：

import { Component, Input } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  private _data: any[] = [];
  private _additionalValues: any[] = [];

  @Input() set additionalValues(value: any[]) {
    this._additionalValues = value ?? [];
    // 重新合并当前data和新的additionalValues
    const originalData = this._data.filter(item => !this._additionalValues.includes(item));
    this._data = [...this._additionalValues, ...originalData];
  }

  get additionalValues(): any[] {
    return this._additionalValues;
  }

  @Input() set data(value: any[]) {
    const safeData = value ?? [];
    this._data = [...this._additionalValues, ...safeData];
  }

  get data(): any[] {
    return this._data;
  }
}

额外提示 #

• 空值安全处理：一定要用?? []或|| []处理可能的null/undefined，避免展开数组时出错。
• 去重逻辑（可选）：如果你的业务不允许数组中有重复项，可以在合并时用Set来去重，比如return [...new Set([...safeAdditional, ...base])]。
• 关于“获取到数组长度”的问题：大概率是你在某个场景下误将data.length的赋值或引用当成了data本身，或者在additionalValues未正确初始化时，_data被意外设置成了数字。上面的修复方案可以避免这类情况。

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