Angular2エラーが発生しました。

Question

私は、reactFormsを使用してコントロールを動的に追加しようとしています。

私のコードでは、ドロップダウンメニューに値を入力しようとしています。これらは動的なフィールドなので、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を使用できます。いくつかの例がここにあります： `[{ "名"： "リストで"、 "ID"：1}、{ "名"： "リストにない"、「IDあなたは返します次を貼り付けたラインaccess key and value of object using *ngFor