Angular: Check for json properties

3639 views angular
3

Ok, so I faced an issue and can't find a solution

Please read carefully

I want to check in my angular template for a property and then to attach style to it.

The problem: it only works for the first child property.

For example I want to apply some style to my div, so I check this:

[ngStyle]="{'flex-flow': data.section.a.subtitle ? 'column' : 'row' }"

Angular can only check for the first path data.section

And I know that because I tried a nested *ngIf in other cases, for example if the JSON structure is

"batters":
        {
          "batters":
             { "id": "1001", "type": "Regular" }
          }

and I want to check the 'id' property in angular, I need to do something like:

<ng-container *ngIf="batters">
  <ng-container *ngIf="batters.batters">
    <ng-container *ngIf="batters.batters.id">
        {{ batters.batters.id }}
    </ng-container>
   </ng-container>
</ng-container>

If I'm trying to go straight to the prop like: <ng-container *ngIf="batters.batters.id"> I got this:

ERROR TypeError: Cannot read property 'id' of undefined

So in this case I can nest the *ngIf's but what can I do for the example above? Is there a better way to check for a nested prop in Angular?

answered question

1 Answer

10

You can work with save Navigation operator ? to avoid this kind of errors :

{{ batters?.batters?.id }}

Regards,

posted this

Have an answer?

JD

Please login first before posting an answer.