@Input 数组未定义答案

【问题标题】：@Input array undefined@Input 数组未定义
【发布时间】：2025-12-20 06:45:14
【问题描述】：

我在父组件中实现了一个子组件，我将数据传递给子组件。但是当我尝试使用数组时，我总是得到一个未定义的。

我该如何解决这个问题？

export class SelectionFieldComponent implements OnInit {

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

  constructor() { }

  ngOnInit() {
    console.log(this.data);
  }
}

parent.component.html

<app-selection-field [data]="units"></app-selection-field>

编辑：我看到网站上的数据，但也得到了错误。

【问题讨论】：

你能在 stackblitz.com 上创建一个小例子吗？
能不能显示父代码和你说把数据传给孩子的地方？
units 分配的内容如何？
单位：string[] = ['mm', 'kg', 'stk'];
当您提供 stackblitz 时，请确保它是工作 stackblitz。这是一个工作 stackblitz，我们可以看到您提供的代码正常工作：stackblitz.com/edit/angular-jp8che?file=app/…

标签： angular input

【解决方案1】：

这可能取决于您如何创建数据数组。

如果来自 observable：

第一个解决方案来实现OnChanges 接口。因为 observable 获取 data 异步，然后解析到组件。所以你可能无法在ngOnInit() 方法中打印data，因为data 可能会在组件初始化之后出现。

ngOnChanges(changes: SimpleChanges): void {
    if (changes['data']) {
        this.data = changes['data'].currentValue;
    }
}

第二个解决方案
使用setTimeout() 方法，但这是非常糟糕的做法。

如果是静态（硬编码）数组

它应该可以正常工作。或者尝试使用与上面相同的方法。

另外请阅读component lifecycle

【讨论】：

好吧，OP 说数据分配给units: string[] = ['mm', 'kg', 'stk'];，所以异步应该不是问题。
也已经回答了同类型的问题：*.com/a/39219751/5272951@AJT_82
这个问题和这个问题有什么关系？

【解决方案2】：

您没有添加任何别名。所以你的 parent 的 parent 属性绑定应该是 data

<app-parent [data]="your-array"></app-parent>

在您定义的子组件中

@Input() data:any[] = []

【讨论】：

我做了，但我忘了在我的问题中写下来。我编辑了我的问题。

【解决方案3】：

我已经弄清楚错误来自哪里。在我的父组件中，我有多个选择字段，其中一个未正确接收数据，因此未定义。我认为这就是我们正在谈论的选择领域。在快速 if/else 之后，它现在正在工作。谢谢大家！

【讨论】：