无法以角度方式将数据从父级传递给子级

Question

我是角度新手，我在父组件中有一个数组数据，我将其传递给子组件。在子组件中，数组的长度为零。

代码

https://stackblitz.com/edit/angular-jrkvg1-hzvbjz?file=src%2Fapp%2Fstudent-dashboard%2Fcontainers%2Fstudent-dashboard%2Fstudent-dashboard.component.ts,src%2Fapp%2Fstudent-dashboard% 2Fcomponents%2Fstudent-count%2Fstudent-count.component.ts,src%2Fapp%2Fstudent-dashboard%2Fstudent-dashboard.module.ts

预期结果计数应为 5，但接收结果为零。

有人可以帮我吗，不知道我错过了什么。

Answer 1

您没有正确地将值传递给子组件。

目前您有：

<student-count>
  [items] = "students"
</student-count>

这应该是：

<student-count [items]="students"></student-count>

属性通过

[]

传递，事件/处理程序使用

()

。双向绑定使用

[()]

.

请记住，

@Input

仅在reference更改时调用更改检测。因此，对于数组和对象，如果数组的成员发生更改或对象的属性发生更改，更改检测将不会响应。

您必须将全新的数组或对象传递给

@Input

才能使更改检测按预期工作。