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?

score 2 · Answer 1 · answered Sep 14 '17 at 06:21

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 '17 at 06:21

Sajeetharan

216,225
63
350
396

Now after implementing this I got the below error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object' – Sumit Joshi Sep 14 '17 at 06:27

score 0 · Accepted Answer · answered Sep 14 '17 at 06:21

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 '17 at 06:21

Günter Zöchbauer

623,577
216
2,003
1,567

Now after implementing this I got the below error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object' – Sumit Joshi Sep 14 '17 at 06:26
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` https://stackoverflow.com/questions/41396435/how-to-iterate-object-object-using-ngfor-in-angular-2/41396558#41396558 – Günter Zöchbauer Sep 14 '17 at 06:28
Perfect.. Thanks .. :) – Sumit Joshi Sep 14 '17 at 06:39

Bind array value in HTML

2 Answers2