@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
– Llorenç Pujol Ferriol, Commented Aug 20, 2019 at 7:33
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: stackblitz.com/edit/angular-jp8che?file=app/… — AVJT82
– AVJT82, Commented Aug 20, 2019 at 8:34

Dumbo · Accepted Answer · 2019-08-20 08:44:03Z

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, 2019 at 8:44

answered Aug 20, 2019 at 8:37

Dumbo

1,8471 gold badge21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AVJT82 Over a year ago

well, OP says the data is assigned units: string[] = ['mm', 'kg', 'stk']; so async shouldn't be the issue.

Dumbo Over a year ago

Also there is already answered same type of question: stackoverflow.com/a/39219751/5272951 @AJT_82

AVJT82 Over a year ago

what does that question have to do with this question?

Ruwandi · Accepted Answer · 2019-08-20 07:43:16Z

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, 2019 at 7:43

Ruwandi

513 bronze badges

1 Comment

lrefopam Over a year ago

I did, but I forgot to write it in my question. I edited my question.

lrefopam · Accepted Answer · 2019-08-20 08:52:24Z

0

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!

answered Aug 20, 2019 at 8:52

lrefopam

5411 gold badge6 silver badges24 bronze badges

Collectives™ on Stack Overflow

@Input array undefined

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related