Question: I have a simple model declared in angular as an interface.  

[![enter image description here](https://i.stack.imgur.com/4RKRL.png)](https://i.stack.imgur.com/4RKRL.png)

I am trying to get some data by calling the Get method of the HttpClient as this:
[![enter image description here](https://i.stack.imgur.com/rS8ul.png)](https://i.stack.imgur.com/rS8ul.png)

where the field `this.plugs` is an array of `Plug` elements.

This data I am trying to display in a table in my page as this:
[![enter image description here](https://i.stack.imgur.com/iCDHp.png)](https://i.stack.imgur.com/iCDHp.png)

The data is not displayied. After I did some investigation in my code it seems that if I log the whole data that is returned from the HTTP call it is shown as it is supposed to be (a list of objects of type `Plug`) but if I try to console.log one field of a object from the array it shows up as undefined and I can't figure out why.
I believe that this is the problem in my code and that's why the data is not displayied in the table.

Here is the results for `console.log` of the object that is returned from HTTP get call and also result for console.log after casting the result to a local variable.
[![enter image description here](https://i.stack.imgur.com/6kI8Y.png)](https://i.stack.imgur.com/6kI8Y.png)

My question is why does it behave this way and what can I do to fix this?

What I tried is I have looped through the data that is returned from the HTTP GET call and foreach of them create a new objecte of type `Plug` and assign its ,members in order. But if I do that all the members shown up as undefined in the console.

Any help would be much appreciated!

Answer: 
The actual problem seems to be that your backend defines the property names with capital letter, whereas you defined them in lowercase letters (`countIn` vs `CountIn`) therefore all the outputs will be `undefined`.

On the other hand it would be a better approach to `subscribe` to the observable through angulars [`async` pipe](https://angular.io/api/common/AsyncPipe) rather than calling `.subscribe` manually.

I will not provide the complete corrected code, because you posted it as a screenshot that we simply can't copy.

```
// inside controller (The http call should be in a service for reusability)
this.plugs$ = this.http.get<Plug>(..);

// inside HTML:
<div *ngFor="let plug of plugs$ | async>
  <p>{{ plug.CountIn }}</p>
</div>

// interface
interface Plug {
  CountIn: number;
  ...
}

```
instead of subscribing to the `Observsble`, you should use `async pipe`:

```
*ngFor="let plug of plugs | async"

```

and then in your ts file, simply:

```
this.plugs = this.httpClient.get<Plug[]>(this.plugsUrl);

```