Bind array value in HTML

Question

The output of my data in console.log:

{TotalPendingResponseCount: 0, TotalRequestSendCount: 1, TotalRequestReceivedCount: 1, TotalRequestRejectCount: 3}

To capture these information I am holding it in array:

userData : arrayResponseCount[];
To get the result:
this.dataservice.getData(Url).
    subscribe((res: any) => 
    { this.userData = res });
  }

And my arrayResponseCount class is:

class arrayResponseCount {
  constructor(public TotalRequestSendCount: string, public TotalPendingResponseCount: string,
              public TotalRequestRejectCount: string, public TotalRequestReceivedCount: string
  ){}
}

Now I need to bind the value in HTML. For this I am using the syntex is

But it thrown the exception i.e. ERROR TypeError: Cannot read property 'TotalRequestSendCount' of undefined.

Do you have any idea for this?

Sajeetharan · Accepted Answer · 2017-09-14 06:21:00Z

2

Since you are getting data from an async request, there could be a delay, you can handle with the safe navigation operator ?,

{{userData?.TotalRequestSendCount}}

answered Sep 14, 2017 at 6:21

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Sumit Joshi Over a year ago

Now after implementing this I got the below error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'

Günter Zöchbauer · Accepted Answer · 2017-09-14 06:21:54Z

0

When Angular first evaluates your binding {{userData.TotalRequestSendCount}}, userData doesn't have a value yet.

Use instead

{{userData?.TotalRequestSendCount}}

to tell Angular it shouldn't try accessing TotalRequestSendCount while userData is null (it's called safe-navigation operator)

answered Sep 14, 2017 at 6:21

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

3 Comments

Sumit Joshi Over a year ago

Now after implementing this I got the below error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'

Günter Zöchbauer Over a year ago

Your value is an object, not an array. *ngFor doesn't support binding to objects directly. This answer shows a pipe that converts the value so that you can use it with *ngFor stackoverflow.com/questions/41396435/…

Sumit Joshi Over a year ago

Perfect.. Thanks .. :)

Collectives™ on Stack Overflow

Bind array value in HTML

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related