尝试区分的Angular2错误

Question

我有一个表单，我正在尝试使用 reactiveForms 动态添加控件。

在我的代码中，我试图填充一个下拉菜单。我正在使用formArray，因为这些是动态字段。

数据：

{ "ruleName": "", "ruleDescription": "", "ruleOutcome": "", "addVariable": "2", "variables": [ { "id": "2", "name": "Device Trust Score", "operator": [ { "name": "Greater Than <", "id": 3 }, { "name": "Less Than >", "id": 4 } ], "values": "" } ] }

HTML：

<tbody formArrayName="variables">
   <tr *ngFor="let variable of addRuleForm.get('variables').controls; let i=index" [formGroup]="variable">
   <td>{{ addRuleForm.controls.variables.controls[i].controls.name.value}}
      <input type="hidden" formControlName="id" value="addRuleForm.controls.variables.controls[i].controls.id.value" [attr.id]="'id'+i">
   </td>
   <td>
      <select class="form-control input-sm" formControlName="operator" [attr.id]="'operator'+i">
         <option value="">Select an Operator</option>
         <option *ngFor="let o of addRuleForm.controls.variables.controls[i].controls.operator.value" value="{{ o.id }}">{{ o.name }}</option>
      </select>
   </td>
   <td>
      <button type="button" class="btn btn-danger btn-sm" (click)="removeVariable(v.id)"><i class="fa fa-trash-o"></i>
      </button>
   </td>
   </tr>
</tbody>

这个选择输入被渲染到页面就好了。我检查了源代码，发现该值也已正确设置为 ID。

但是，一旦我从中选择一个选项，我就会收到此错误：

Error: Error trying to diff '4'. Only arrays and iterables are allowed 引用我选择的项目的 ID。

有什么想法吗？

Answer 1

该消息可能告诉您，您正在尝试*ngFor 一些它不理解的东西。

我假设这个addRuleForm.controls.variables.controls[i].controls.operator.value 可能是 4？您的意思是在这里使用value 属性吗？

如果你想遍历一个 JSON 对象，你可以使用 Object.keys。这里有几个例子：access key and value of object using *ngFor