Angular 8 (Typescript)键值对输入字段输出修改

Question

你好团队我需要在 angular 中创建两个输入字段，形成一个键值对，就像下图一样，我找到了一篇文章做同样的事情但是这个字段输入的输出结果是不是我想要的预期格式。

预期输出:-

{ "details": [ { "select1-inputvalue": "select2-inputvalue" }, { "select1-inputvalue": "select2-inputvalue" } ] }

我找到的文章使用反应形式来实现这一点，我尝试了不同的方法来创建输出作为预期的 Json 对象，但它没有用，因为我不是 angular专家的帮助表示赞赏。现有的 fork 还包含一个文本输入，这将是一个下拉列表。

现有 Post:- https://keepnote.cc/code/reactive-form-key-value-pair-bootstrap-angular-4-5-6-7

StackBlitz link : StackBlitz link

Answer 1

添加以下逻辑以便解析 表单中的 key-value 对。

.ts

public display;

viewJson() {
   this.display = Object.entries(this.keyValueForm.value.details).map((e) => {
     return {
       [e[1].key]: e[1].value,
     };
   });
}

.html

<button (click)="viewJson()">Click to see translated response</button>

<div>
  {{ display | json }}
</div>

Forked stackblitz.