How can I access the properties of a nested object in Angular?

Question

I have this Model-class.

export class Drivefunction{
public Injection: Injection;
public df_uid_machine_injsiz:string;
public Motor_Cable_IEC: Motor_cable;
...

And in my display.component.ts I have this function which fills my Drivefunction[]

fillDrivefunctions(){
  this.machineService.getDrivefunctions(this.injectionID)
    .subscribe((df:Drivefunction[])=> {
      this.drivefunctions = df;
      console.log(this.drivefunctions)
    });
}

As you see I try a console.log to see if the json Objects a properly filled

all Objects and nested Objects are filled!

and in my HTML I have a ngFor with my drivefunction[] I can access properties like strings but get "cannot read property of undefined" if i try to access an nested object even if it's correctly filled.

Do I have to "extra" subscribe this nested objects?

my HTML:

<ion-list *ngFor="let drivefunction of this.drivefunctions; ">
    <ion-item> 
       <ion-label>{{drivefunction.Injection.inj_uid_machine_injsiz}}</ion-label>
    </ion-item>
</ion-list>

{{drivefunction.Injection?.inj_uid_machine_injsiz}} use the ? operator. If Injection isn't populated it won't try to access inj_uid_machine_injsiz. you also don't need the this in the html. — rhavelka
– rhavelka, Commented Nov 30, 2020 at 15:46
@rhavelka i know but my nested objects are undefined, but as you see the console output they aren't — futuremanuel
– futuremanuel, Commented Nov 30, 2020 at 15:48

Marco · Accepted Answer · 2020-11-30 15:55:41Z

2

I think this is a typo problem.

Based on the HTML you gave.

<ion-label>{{drivefunction.Injection.inj_uid_machine_injsiz}}</ion-label>

Bu in the console screenshot, we can see that Injection is lowercase. Try

<ion-label>{{drivefunction.injection.inj_uid_machine_injsiz}}</ion-label>

And change the Drivefunction class accordingly:

export class Drivefunction {
   public injection: Injection;
...

edited Nov 30, 2020 at 15:55

answered Nov 30, 2020 at 15:53

Marco

1,10310 silver badges24 bronze badges

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

2 Comments

Titus Sutio Fanpula Over a year ago

Yeah, that's right. I didn't see it. +1 for you

Marco Over a year ago

@futuremanuel I have added details to my answer.

Titus Sutio Fanpula · Accepted Answer · 2020-11-30 15:53:24Z

0

Make sure to declare your drivefunction properties as an array. It will looks like this code below:

public drivefunction: Array<Drivefunction> = new Array();

So now, you will get te result. I hope so.

answered Nov 30, 2020 at 15:53

Titus Sutio Fanpula

3,6334 gold badges18 silver badges36 bronze badges

4 Comments

rhavelka Over a year ago

leaving the variable undeclared wouldn't cause the "cannot read property of undefined" error

Titus Sutio Fanpula Over a year ago

I thinks it will, if you don't use *ngIf condition and you use the loop. Baceuse you can loop undefined value of a property, when the data still waiting for response.

rhavelka Over a year ago

It doesn't, if the array is [], null, or undefined then there is nothing to loop over, so the *ngFor doesn't try to access any of the child objects. you can play around in this stackblitz

Titus Sutio Fanpula Over a year ago

Thanks for your explaination.

Collectives™ on Stack Overflow

How can I access the properties of a nested object in Angular?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related