CODEWITHSUNDEEP
javascripthtmlangularsyntax
Anton Ödman
Anton Ödman

Reputation: 541

Angular - access ngFor variable within a nested object

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>

Upvotes: 0

Views: 398

Answers (3)

Barremian
Barremian

Reputation: 31125

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

Upvotes: 2

Mayeed
Mayeed

Reputation: 800

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

Try:

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

Upvotes: 0

user12706327
user12706327

Reputation:

Try this:

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

Upvotes: 0

Related Questions