CODEWITHSUNDEEP
jsonangulartypescriptobjectnested
futuremanuel
futuremanuel

Reputation: 23

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

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

enter image description here

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>

Upvotes: 1

Views: 1653

Answers (2)

Marco
Marco

Reputation: 1093

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;
...

Upvotes: 2

Titus Sutio Fanpula
Titus Sutio Fanpula

Reputation: 3613

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.

Upvotes: 0

Related Questions