Angular 从给定的JSON数据创建嵌套表单，级别为N

我必须基于从后端接收到的JSON数据，用Angular5构建一个表单。数据具有嵌套结构，可以包含N级

例如，第一级有{key，type}，如果它的type='choose'，它有另一个属性{key，type，values}，第二级是values，它有{value，fields}，第三级是fields。。等

这是一个数据示例

现在我只需要typescript代码，然后我将处理HTML代码

---

PS：我认为应该是反应式表单，因为用户可以从界面添加或删除数据

几小时前我一直在努力解决这类问题。我把它贴在另一个帖子上，找出了解决方案（在我的解决方案标题下）和给出的答案。这可能对你也有帮助

---

几个小时前，我一直在努力解决这样的问题。我把它贴在另一个帖子上，找出了解决方案（在我的解决方案标题下）和给出的答案。这可能对你也有帮助

---

好的，请耐心听我说，我不打算为您编写代码，我只举一个带有文本的示例

因此，您要做的是生成一致的JSON

fields = [ 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'choosen', fields: [
    {key: 'abcd', type 'text'}, 
    {key: 'abc', type 'choosen', fields: [
      {key: 'abcde', type 'text'} 
    ]} 
  ]} 
]

现在我们有了一个JSON数组，它可以有多个层

现在，对于每个级别，您将在主组件中创建一个组件：

<div *ngFor="let field of fields">
  <div *ngIf="field.key !== choosen">
  <-- what ever you want to do with key put here -->
  <subFields [data]="field.fields" (returnData)="returnData($event)" *ngIf="field.key === choosen"><subfields>

---

好的，请耐心听我说，我不打算为你编写代码，我只举一个例子和一些文字

因此，您要做的是生成一致的JSON

fields = [ 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'choosen', fields: [
    {key: 'abcd', type 'text'}, 
    {key: 'abc', type 'choosen', fields: [
      {key: 'abcde', type 'text'} 
    ]} 
  ]} 
]

现在我们有了一个JSON数组，它可以有多个层

现在，对于每个级别，您将在主组件中创建一个组件：

<div *ngFor="let field of fields">
  <div *ngIf="field.key !== choosen">
  <-- what ever you want to do with key put here -->
  <subFields [data]="field.fields" (returnData)="returnData($event)" *ngIf="field.key === choosen"><subfields>

我把这个答案从两个层次扩展到了四个层次。但仍然希望我们可以将代码转换为能够接受N级别（N是未知的），就像使用递归函数一样

这是4级的答案

我把这个答案从两级扩展到了4级。但仍然希望我们可以将代码转换为能够接受N级别（N是未知的），就像使用递归函数一样

---

以下是4个级别的答案

JSON是否始终相同，还是可以随多个级别和多个选项而变化？@Swoox它可以随多个级别和多个选项而变化。例如，如果字段类型为“选择”，则该级别有第二个级别，称为“值”。我发布了一个答案，请查看另一个答案的反应形式；）JSON是否总是相同的，或者它可以随多个级别和多个选项而变化？@Swoox它可以随多个级别和多个选项而变化。例如，如果字段类型为“选择”，则该级别有第二个级别，称为“值”。我发布了一个答案，请查看另一个答案的反应形式；）非常感谢。我添加了另一个级别处理N级应该使用递归函数实现。谢谢。。我添加了另一个级别处理N级应该使用递归函数实现。嗨@Hala Ba，stackblitz没有显示任何内容。组件“HTML”为空。嗨@Hala Ba，stackblitz没有显示任何内容。组件“HTML”为空。