CODEWITHSUNDEEP
angulartypescriptdata-binding
Sithys
Sithys

Reputation: 3793

Angular 5 - Two way data binding not working

I'm not getting it... I'd like to do a get request on my service which gives me the specific hardware for the barcode i scanned - this works already.

I get the correct hardware back as an object, looks like this ->

enter image description here

But if I want to display this object now, I only get [object Object] in my frontend.

component.html

{{ terminal }}

component.ts

terminal: any[] = [];

constructor(private terminalService: TerminalService) { }

this.terminalService.getTerminalByBarcode(barcode).subscribe(terminal => {
   console.log(terminal.terminal);
   this.terminal = terminal.terminal;
});

I already tried with terminal: Object; but that doesn't change anything. Hope someone can tell me, where I'm thinking wrong of two way data binding?

Upvotes: 0

Views: 1032

Answers (2)

Jamie Rees
Jamie Rees

Reputation: 8183

It's because on your view you are trying to output the actual object .toString.

You need to output the objects properties like the following:

{{ terminal.barcode }}
{{ terminal.dateArrival }}

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68655

If terminal.terminal is an object, the output of {{ terminal }} is OK to be [object Object], because it calls toString on that object.

To see the structure of the terminal you can use json pipe

{{ terminal | json }}

Upvotes: 3

Related Questions