Angular 5 - 两种方式数据绑定不起作用答案

【问题标题】：Angular 5 - Two way data binding not workingAngular 5 - 两种方式数据绑定不起作用
【发布时间】：2018-02-01 12:16:53
【问题描述】：

我没听懂...我想在我的服务上发出一个获取请求，它为我扫描的条形码提供了特定的硬件 - 这已经可以了。

我得到了正确的硬件作为一个对象，看起来像这样 ->

但是如果我现在想显示这个对象，我只会在我的前端得到[object Object]。

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

我已经尝试过terminal: Object;，但这并没有改变任何东西。希望有人能告诉我，我认为双向数据绑定的错误在哪里？

【问题讨论】：

你到底想在 UI 上显示什么，就像你想显示的对象的哪些属性一样？？

标签： angular typescript data-binding

【解决方案1】：

如果terminal.terminal 是一个对象，则{{ terminal }} 的输出可以是[object Object]，因为它在该对象上调用toString。

要查看terminal 的结构，您可以使用json 管道

{{ terminal | json }}

【讨论】：

非常感谢，| json 成功了！将尽快接受您的回答

【解决方案2】：

这是因为在您看来，您正在尝试输出实际对象 .toString。

你需要像下面这样输出对象属性：

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

【讨论】：