Angular - access ngFor variable within a nested object

Question

I have accessed to a variable called key in this html element. How do I put the key inside of the

*ngIf below: *ngIf="isSubmitted && errors.key.translations", especially the errors.key.translation part.

<div class="form-group col" *ngFor="let key of matchingKeys">
    <div
        *ngIf="isSubmitted && errors.key.translations"
        class="invalid-feedback"
    >       
</div>

Do you mean access whatever isSubmitted && errors.key.translations gives inside the div? — dcg
– dcg, Commented Feb 24, 2020 at 15:02
No, I mean that errors.key.translations does not work. What is the correct syntax? — Anton Ödman
– Anton Ödman, Commented Feb 24, 2020 at 15:04
@AntonÖdman that syntax is correct. Are you getting any error? — dcg
– dcg, Commented Feb 24, 2020 at 15:07
Michael's snippet should work fine: errors[key].translations — Oyekanmi Owolabi
– Oyekanmi Owolabi, Commented Feb 24, 2020 at 15:17

Barremian · Accepted Answer · 2020-02-24 15:20:24Z

2

Replace dot with brackets. It should allow to access properties by name stored in a variable. Refer here. The following code should do it

<div *ngFor="let key of matchingKeys">
  <div *ngIf="isSubmitted && errors[key].translations">
    <p>
      {{ key }}
    </p>
  </div>       
</div>

Working example: Stackblitz

answered Feb 24, 2020 at 15:20

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

user12706327 · Accepted Answer · 2020-02-24 15:13:19Z

0

Try this:

<div class="form-group col" *ngFor="let key of matchingKeys">
    <div
        *ngIf="isSubmitted && errors[key]['translations']"
        class="invalid-feedback"
    >       
</div>

answered Feb 24, 2020 at 15:13

user12706327

Comments

Mayeed · Accepted Answer · 2020-02-24 15:18:43Z

0

I am assuming matchingKeys are the keys to get error..

Try:

*ngIf="isSubmitted && errors[key].translations"

answered Feb 24, 2020 at 15:18

Mayeed

8001 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular - access ngFor variable within a nested object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related