在组件之间传递接口数组angular 2

Question

通过@Input在组件之间传递数据（Array）时遇到了一些麻烦，有一些代码。 parent.component.ts：

public ngOnInit() {
    this.applications = new Array<ApplicationEntryInterface>();
(...)
let shortTermData = new ShortTermApplicationAdapter(application);
this.applications.push(shortTermData);
console.log(this.applications);
}

这个console.log显示正常数组 parent.component.html

<student-application-overview [applicationsEntry]="applications"></student-application-overview>

子组件：

@Input('applicationsEntry') public applicationsEntry: Array<ApplicationEntryInterface>;
 ngOnChanges() {
console.log(this.applicationsEntry);
console.log(this.applicationsEntry.length); <--- shows 0
}

显示 在forfor，foreach等中迭代它是不可能的，只有* ngFor工作，this.applicationsEntry.length等于0，我该如何处理呢？ 我也使用了@Input（..）set（..）{（..）}，它给出了相同的结果

Answer 1

我将ngOnChanges用于更改。这只会在当前值与前一个值不同时更改，但如果您每次创建一个对象都应该正常工作。

更改将记录组件内更改的所有项目。

尝试：

ngOnChanges(changes: any) {
        if (changes.applicationsEntry) { // this help to filter out undefined
           console.log(changes.applicationsEntry.currentValue); // your current array should be here
        }
    }

Answer 2

我是Angular中的新手，但我总是将此语法用于输入

@Input() applicationsEntry: Array<ApplicationEntryInterface>;

Answer 3

问题在于Angular的 ChangeDetection ，以及您的更新方式＆＃34;父组件上的Array属性。

只需在数组中添加新项目，就不会在 OnChanges 生命周期钩子中注意到子组件。

如果要解决此常见问题，请在父组件上执行与此类似的操作：

let shortTermData = new ShortTermApplicationAdapter(application);
this.applications.push(shortTermData);
this.applications = [...this.applications]; // Here is the "magic"

最后一行创建了一个新的数组深层副本，并允许注意到Arular的ChangeDetection有关数组中的更改。