Angular 5 - Two way data binding not working

Question

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 ->

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?

What do you exactly want to display on the UI as in what properties of the object you want to display?? — Sumeet Kale
– Sumeet Kale, Commented Feb 1, 2018 at 12:19

Suren Srapyan · Accepted Answer · 2018-02-01 12:18:01Z

3

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 }}

answered Feb 1, 2018 at 12:18

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

Sithys Over a year ago

thanks a lot, | json is what did the trick! Will accept your answer as soon as it's possible

Jamie Rees · Accepted Answer · 2018-02-01 12:19:50Z

1

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 }}

answered Feb 1, 2018 at 12:19

Jamie Rees

8,1832 gold badges51 silver badges84 bronze badges

Collectives™ on Stack Overflow

Angular 5 - Two way data binding not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related