我有 json 响应 {"CustomerAccount":{"segment":"Enterprise","type":"Domestic"}} 这个 json 从另一个 url 获取。
到目前为止我做了什么，这个 json 发送到用 angular 构建的第二个 url，并且已经在控制台上打印了。
我尝试使用 <input type="text" class="form-control form-control-sm" id="nama-ocr" name="{{ segment }}"> 将 json 填充为角度页面中的表单值
有人怎么做吗？我应该在 component.ts 文件中放什么？
还尝试了来自 github 的 dannyvankooten 的 populate.js，但只是在处理非角度 html
谢谢，
【问题讨论】：
标签： json angular typescript
好吧，如果我正确地收集了所有内容，那么您已经将返回的 json 对象记录到控制台。我将假设您将异步返回变量记录到控制台。因此，我将尝试帮助您将该异步对象存储在组件对象中，并将值打印到您的 html 文件中。
在您的打字稿文件中，您需要导出一个界面，该界面的结构与您希望从您的服务接收的数据相同。在您的模块导入后立即执行此操作：
...
import { Component, OnInit } from '@angular/core';
...
export interface CustomerAccountObject {
CustomerAccount: {
segment: string;
type: string;
}
}
然后在你的 ts 文件中，声明你的对象：
export class SomeComponent implements OnInit {
public customerAccountObject: CustomerAccountObject; // We're defining an object and giving it the Type of the interface we just exported.
...
}
现在，当您通过异步订阅数据时，您将返回的 json 对象设置为您的 customerAccountObject：
export class SomeComponent implements OnInit {
public customerAccountObject: CustomerAccountObject;
...
constructor(){}
this.yourHttpService.yourMethodOrEndPoint(yourParams).subscribe((result) => {
this.customerAccountObject = JSON.parse(result);
console.log(this.customerAccountObject);
});
现在在 html 端，您可以像这样打印您的值，假设您希望输入 VALUE 采用属性值：
<input type="text" class="form-control form-control-sm" id="nama-ocr" name="some name" value="{{ customerAccountObject.CustomerAccount.segment }}">
希望这会有所帮助。
【讨论】：
this.yourHttpService.yourMethodOrEndPoint(yourParams).subscribe((result) => { this.customerAccountObject = JSON.parse(result); console.log(this.customerAccountObject); });
您可以简单地使用ngModel 绑定它，示例：
<input type="text" class="form-control form-control-sm" id="nama-ocr" name="segment" [(ngModel)]="myJSON['CustomerAccount']['segment']">
当您的 JSON 被获取或更新时，这将自动更新输入中的值。
【讨论】：