@Input array undefined

Question

I have a child component implemented in the parent component where I pass data to the child component. But when I try to use the array, I always get an undefined.

How can I fix this?

export class SelectionFieldComponent implements OnInit {

  @Input() data: any[] = [];

  constructor() { }

  ngOnInit() {
    console.log(this.data);
  }
}

parent.component.html

<app-selection-field [data]="units"></app-selection-field>

EDIT: I see the data on the site, but also get the error.

can you show the parent code and the place where you say you pass the data to the child? — Llorenç Pujol Ferriol, Aug 20 '19 at 07:33
Please provide a stackblitz which reproduces your issue. Now seeing how you assign data, your code should work fine. And you say `I also get the error`, what error would that be? since you also say that you can see the data. — AT82, Aug 20 '19 at 08:22
When you provide a stackblitz, please make sure that it is a **working** stackblitz. Here is a **working** stackblitz, and we can see that the code you provided works just like it should: https://stackblitz.com/edit/angular-jp8che?file=app/form-field-overview-example.ts — AT82, Aug 20 '19 at 08:34

Dumbo · Answer 1 · 2019-08-20T08:44:03.917

2

It might depend on how do you create your data array.

If it's from observable:

1st solution to implement OnChanges interface. Because observable gets data asynchronous and just then parses to the component. So you might not be able to print data in ngOnInit() method, because data might come just after component initialization.

ngOnChanges(changes: SimpleChanges): void {
    if (changes['data']) {
        this.data = changes['data'].currentValue;
    }
}

2nd solution
Use setTimeout() method, but it's very bad practice.

If it's a static (hard coded) array

It should work as it is. Or try to use same methods which is above.

Also please read about component lifecycle

edited Aug 20 '19 at 08:44

answered Aug 20 '19 at 08:37

Dumbo

1,630
18
33

well, OP says the data is assigned `units: string[] = ['mm', 'kg', 'stk'];` so async shouldn't be the issue. – AT82 Aug 20 '19 at 08:44
Also there is already answered same type of question: https://stackoverflow.com/a/39219751/5272951 @AJT_82 – Dumbo Aug 20 '19 at 08:47
what does that question have to do with this question? – AT82 Aug 20 '19 at 08:51

score 1 · Answer 2 · answered Aug 20 '19 at 07:43

1

You haven't included any alises. So your parent property binding of parent should be data

<app-parent [data]="your-array"></app-parent>

In your child component, as you defined

@Input() data:any[] = []

answered Aug 20 '19 at 07:43

Ruwandi

41
3

I did, but I forgot to write it in my question. I edited my question. – lrefopam Aug 20 '19 at 08:10

score 0 · Answer 3 · answered Aug 20 '19 at 08:52

I have figured out where the error comes from. In my parent component I have multiple selection-fields and one of them don't received the data correctly so it is undefined. I thought that was the selection field we are talking about. After a quick if/else it is working now. Thank you all!

@Input array undefined

3 Answers3