Angular 2: ngFor loop undefined value

Question

I have a simple *ngFor loop and I cannot figure out why it's throwing an error

<ion-list>
  <ion-item *ngFor="let comment of [{'employee': 'jeremy lopez', 'desc': 'blah blah blah'}]">
    <ion-avatar item-left>
      <div class="initial-container">
        <div class="flex justify-content-center align-items-center">
          <div>{{ comment.employee }}</div>
        </div>
      </div>
    </ion-avatar>
    <p>{{ commment.desc }}</p>
  </ion-item>
</ion-list>

this throws an error TypeError: Cannot read property 'desc' of undefined even though it's clearly defined. When I move the {{ comment.desc }} up a couple lines in the DOM, it works:

<ion-item *ngFor="let comment of [{'employee': 'jeremy lopez', blah: 'blah blah blah'}]">
  <ion-avatar item-left>
    <div class="initial-container">
      <div class="flex justify-content-center align-items-center">
        <div>{{ comment.employee | initialFormat }}</div>
        <p>{{ commment.desc }}</p>
      </div>
    </div>
  </ion-avatar>
</ion-item>

which is great and all, but I need to be able to access comment.desc outside the <div class="initial-container"></div>.

Can someone explain what's happening?

mercador · Accepted Answer · 2017-06-02 14:26:40Z

4

commment is undefined, but comment is defined. You have a typo.

answered Jun 2, 2017 at 14:26

mercador

2736 silver badges12 bronze badges

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

1 Comment

Jeremy Thomas Over a year ago

-_- sheeeeeeshh

Collectives™ on Stack Overflow

Angular 2: ngFor loop undefined value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related