如何在离子输入字段中使用对象答案

【问题标题】：How do I use objects in the ion-input field如何在离子输入字段中使用对象
【发布时间】：2020-09-25 16:12:16
【问题描述】：

我有一个离子输入字段，它必须使用来自后端服务的对象或空值并返回对象或空值。我可以这样做，但输入字段将按预期显示 [object Object]。

对象

{ContactRelationID: 345678, Name: Thomas}

ion-input 显示 [object Object]

<ion-input name=“test”  [(ngModel)]="ContractorInput" readonly></ion-input>

ion-input 显示 Thomas 有对象，但失败并返回 null

<ion-input name=“test”  [(ngModel)]="ContractorInput.Name" readonly></ion-input>

在尝试绑定到 [(ngModel)]="ContractorInput.Name" 或仅查看输入中的 Thomas 而不是 [object Object] 时，是否有抑制 null 错误

【问题讨论】：

您希望在离子输入中看到什么格式？另外，由于它是 readonly ，它是否有助于将结果呈现为文本而不是输入？在尝试解决方案之前，想更多地了解您的目标。 ;)
基本上，如果需要，我可以隐藏输入，因为用户不需要查看对象。但我希望用户看到 Thomas 的名字。我目前正在尝试离子选择，但我认为这不是最佳解决方案

【解决方案1】：

对于“只读”数据的输入，确实不需要双向绑定。忘记[(ngModel)]，直接赋值即可。使用?. 可选链接运算符，这样如果值为null，它将只是一个空输入。

<ion-input name="test" value="{{ContractorInput?.Name}}" readonly></ion-input>

【讨论】：