Question

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

我该如何解决？

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>

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

Answer 1

您尚未包含任何别名。因此，您的父项的父项属性绑定应为数据

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

在您定义的子组件中

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

Answer 2

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

如果是从可观察到的：

第一个解决方案以实现OnChanges接口。因为可观察的对象data是异步的，然后才解析为该组件。因此，您可能无法使用data方法打印ngOnInit()，因为data可能刚好在组件初始化之后出现。

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

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

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

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

还请阅读有关component lifecycle

的信息

Answer 3

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

@输入数组未定义

3 个答案: