时间戳

首页 > 解决方案 > Angular 5 将未定义的 @Input() 变量值获取到从 ngOnInit() 调用的函数中

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

问题描述

这是子组件的代码示例。

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()。

标签： typescriptangular5

解决方案

似乎您没有正确设置 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);
    }
}

推荐阅读