Question

我从服务获得以下响应，其中包括json模式格式的表单定义。

现在我想在角度组件中迭代此响应。

所以我在一个Formdata变量中获取了这样的所有模式元素。

          res['tabs'].forEach(element => {
              this.tablist.push(element);

            });


       this.tablist.forEach(element => {

            this.FormData[element] = res['com'][element]['schema'];
            this.FormValueData[element] = res['com'][element]['data'];
            this.FetchValueParam[element] = res['com'][element]['data'];
        });

现在我想在视图中访问Formdata的值，并为此编写了以下代码。

                  <form>
                      <div *ngFor='let input1 of FormData[element]['properties']'>

                        <label [for]='input1.type'> input1.title</label>
                        <input type='input1.type' [name]='input1.title' 
                       [placeholder]='something'>
                        <br>
                      </div>
                      <br><br>
                      <button type="submit"> Submit </button>



                   </form>

但我无法将其作为数组访问它，因为它是一个json对象。我已经尝试过Array.of（）和Array.from（）但它没有处理以下错误。如何遍历json并创建表单字段？

            Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

更新：当我使用像这样的虚拟json对象时。我得到了理想的结果。所以我得到的是，ngFor期望的类型与我作为json对象提供的类型之间存在严重的不匹配。

               this.inputfield=
             [{type:'email',name:'email',value:'',placeholder:"your email here"},
            {type:'email',name:'email',value:'',placeholder:'your email 
               here'},{type:'email',name:'email',value:'',placeholder:'your 
                 email here'},
            {type:'email',name:'email',value:'',placeholder:'your email 
                here'},{type:'email',name:'email',value:'',placeholder:'your 
              email here'},
             {type:'email',name:'email',value:'',placeholder:'your email 
               here'},{type:'email',name:'email',value:'',placeholder:'your 
             email here'},
             {type:'email',name:'email',value:'',placeholder:'your email 
             here'},{type:'email',name:'email',value:'',placeholder:'your 
             email 
             here'}{type:'email',name:'email',value:'',placeholder:'your 
              email here'}];

当我在json schema validator中检查它们之间的区别时，我在控制台中显示的前者作为对象出现，但上面的内容是数组。

所以我发送数组不是对象，或者我在运行时基于上面的json模式创建一个数组或类。什么是更好的做法？

Answer 1

假设 this.tablist 是一个字符串数组，您可以将this.FormData [element]中创建的对象更改为数组：

    this.tablist.forEach(element => {
        Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey => {
            this.FormData[element] = [];
            this.FormData[element].push(res['com'][element]['schema']['properties'][inputKey]);
        }
        this.FormValueData[element] = res['com'][element]['data'];
        this.FetchValueParam[element] = res['com'][element]['data'];
    });

然后在模板中使用它，如下所示。

<div *ngFor='let input1 of FormData[element]'>

此外，您没有在此行上使用属性绑定（即如果您没有在组件中指定名称的变量）：

[placeholder]='something'>。

应该是

[placeholder]='"something"'>

如何在角度2中迭代这个json响应

1 个答案: