Angular中如何从@Input传入的数组填充自定义结构数组？

你的两种方法失效的核心原因是**_assets数组未初始化**，默认值为undefined，直接调用push方法会抛出错误。以下是修正后的可行方案：

方法一：修正ngOnInit版本 #

先给_assets和assets初始化空数组，避免空值报错，再通过遍历填充数据：

export interface XXModel {
  id: number;
  category: string;
  serialNumber: string;
  description: string;
}

@Input() assets: XXModel[] = []; // 给Input设置默认空数组，防止父组件不传值时assets为undefined
public _assets: {key:number, value:string}[] = []; // 初始化空数组

ngOnInit() {
  // 过滤数组中的空项，再映射为目标结构
  this._assets = this.assets.filter(Boolean).map(item => ({
    key: item.id,
    value: item.description
  }));
  console.log(this._assets);
}

方法二：修正getter/setter版本 #

需要单独存储原始assets数据，同时初始化_assets，并在setter中清空旧数据再生成新结构：

export interface XXModel {
  id: number;
  category: string;
  serialNumber: string;
  description: string;
}

public _assets: {key:number, value:string}[] = []; // 初始化空数组
private _originalAssets: XXModel[] = []; // 存储原始assets数据，保证getter返回正确类型

@Input()
get assets(): XXModel[] {
  return this._originalAssets;
}
set assets(value: XXModel[]) {
  this._originalAssets = value || [];
  // 清空旧数据，重新生成目标数组
  this._assets = this._originalAssets.filter(Boolean).map(item => ({
    key: item.id,
    value: item.description
  }));
}

关键注意点 #

• 给@Input属性设置默认空数组= []，避免父组件未传值时出现undefined。
• 使用filter(Boolean)过滤数组中的null/undefined项，防止遍历空对象报错。
• 若用map生成新数组，无需调用push，直接赋值更简洁高效。

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