Angular中如何使用transform将@Input数组转换为对象？

完全可以通过transform选项实现这个需求，不管是Angular的InputSignal（推荐的现代方式）还是传统@Input装饰器都能做到。

用InputSignal实现（匹配你的需求示例） #

首先定义状态枚举和转换函数：

// 定义状态枚举
enum Status {
  OK = 'OK',
  ERROR = 'ERROR'
}

// 转换函数：接收数组，返回包含数组和状态的对象
function transformArrayToObject<T>(array: T[]): { array: T[], status: Status } {
  // 可根据数组实际情况调整状态逻辑，比如空数组设为ERROR
  const status = array.length > 0 ? Status.OK : Status.ERROR;
  return { array, status };
}

然后在组件中配置input()信号的transform选项：

import { input } from '@angular/core';

export class MyComponent {
  // 注意类型要改为转换后的对象类型
  public readonly arrayData = input<number[]>([], {
    transform: transformArrayToObject
  });
}

模板中正常传入数组即可：

<my-component [arrayData]="myArray"></my-component>

当传入[1, 2, 3]时，调用arrayData()会返回：

{
  array: [1, 2, 3],
  status: Status.OK
}

传统@Input装饰器的实现方式（Angular 16+支持） #

如果仍在使用传统@Input，也可以直接配置transform：

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

export class MyComponent {
  @Input({ transform: transformArrayToObject })
  arrayData!: { array: number[], status: Status };
}

注意事项 #

• 转换函数的输入类型要和传入数组的类型匹配，返回类型要和组件属性类型一致
• 可在转换函数中添加自定义逻辑，比如根据数组长度、内容调整status值

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