How to bind data with ngFor in angular

Question

I am new to angular. Just learning it. I want to bind data with ngFor. but its not showing any data. Kindly help me to solve this

html file :

 <tbody class="text-center">
          <tr *ngFor="let agent of agentlist ;let i = index">
              <td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
              <td>{{agent?.id?agent?.id:''}}</td>
          </tr>
        </tbody>

error : 

Did you tried removing the '-->' at the end of the first Table Cell?, Also you have and error on the second table cell on id? it seems you miss the dot after id?. Well Itś seem you have repeated agent?.id — xzegga
– xzegga, Commented Jul 28, 2021 at 18:25

xzegga · Accepted Answer · 2021-07-28 18:34:02Z

1

Try removing the --> at the end of the first table cell and correct the binding on the second one.

<tbody class="text-center">
  <tr *ngFor="let agent of agentlist ;let i = index">
      <td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
      <td>{{agent?.id}}</td>
  </tr>
</tbody>

Also, you need to make sure that agentlist has something to iterate. maybe putting a console.log(agentlist) and see what it has inside of it in the ts class. If angelist is only declared but never defined you will get that error. Initialize angelist as an empty array to make sure that have an iterable before defining with the final data.

edited Jul 28, 2021 at 18:34

answered Jul 28, 2021 at 18:28

xzegga

3,1693 gold badges29 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

How to bind data with ngFor in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related