尝试差异的 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>

这个 select 输入可以很好地呈现到页面。我检查了来源，发现该值也已正确设置为 ID。

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

Error: Error trying to diff '4'. Only arrays and iterables are allowed 引用了我 select 编辑的项目 ID。

有什么想法吗？

Answer 1

该消息可能告诉您您正在尝试 *ngFor 它不理解的内容。

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

如果要遍历 JSON 对象，可以使用 Object.keys。这里有几个例子：

尝试差异的 Angular2 错误

Angular2 Error trying to Diff

angular

typescript

angular-reactive-forms