Question

以下是子组件的代码示例。

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创建为父组件，并使用selector和input属性将其传递给child。下面是我如何将dataArray从父级传递给子级的示例。

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

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

Answer 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);
    }
}

Angular 5将@Input（）变量的未定义值转换为从ngOnInit（）调用的函数

1 个答案: