Angular 5 将未定义的 @Input() 变量值获取到从 ngOnInit() 调用的函数中答案

【问题标题】：Angular 5 gets undefined value of @Input() variables into the functions calling from ngOnInit()Angular 5 将未定义的 @Input() 变量值获取到从 ngOnInit() 调用的函数中
【发布时间】：2018-06-05 11:28:59
【问题描述】：

这是子组件的代码示例。

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

@Component({
    ...,
    templateUrl: './example.component.html',
    ...
})
export class ExampleComponent implements OnInit {
    @Input() dataArray: Array<any>;

    constructor(...) {
        ...
    }

    ngOnInit() {
        this.getData();
    }

    getData(){
        console.log(this.dataArray);
    }
}

我正在将 dataArray 创建到父组件中，并使用选择器和输入属性将其传递给子组件。下面是我如何将 dataArray 从父级传递给子级的示例。

<example [dataArray]="dataArray"></example>

当组件初始化并将数据显示在视图中时，我需要对 dataArray 进行计算。目前，它永远不会将数据放入 getData()。

【问题讨论】：

请提供更多细节。您如何使用该组件？你是如何设置dataArray 输入属性的？
我正在将 dataArray 创建到父组件中，并使用选择器和输入属性将其传递给子组件。 IE。
什么时候创建数组？
@abetteroliver 该数组是通过从 API 收集的数据创建的。
这意味着当ngOnInit 被调用时它很可能不可用。最佳解决方案取决于您的应用程序的设计，但按照以下答案的建议使用ngOnChanges 肯定是一个可行的选择。

标签： typescript angular5

【解决方案1】：

您似乎没有正确设置 dataArray 或最终比您预期的要晚。请尝试通过另外使用 OnChanges() 来确定它是否已设置。如果你确实设置正确但对 OnInit() 为时已晚，你应该有一个来自 OnChanges() 的输出。

import { ..., OnChanges } from '@angular/core';
...

@Component({
    ...,
    templateUrl: './example.component.html',
    ...
})
export class ExampleComponent implements OnInit, OnChanges {
    @Input() dataArray: any;

    constructor(...) {
        ...
    }

    ngOnInit() { }

    getData(){
        console.log('ngOnInit()', this.dataArray);
    }

    ngOnChanges(changes: SimpleChanges) {
        // please note: changes.prop contains the old and the new value...
        console.log('ngOnChanges()', this.dataArray);
    }
}

【讨论】：

我没有看到发布与以前相同内容的第二个答案的意义。人们甚至为你的另一个人投票。