title: Cannot find a differ supporting object '[object Object]'
body: <p>I have a select tag inside my FormArray and i have fetched option for that select using http from the api. I have following error help me.</p>
  
  <blockquote>
    <p>CashPluckingLeafComponent.html:44 ERROR Error: Cannot find a differ
    supporting object '[object Object]' of type 'object'. NgFor only
    supports binding to Iterables such as Arrays.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/GXviW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GXviW.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/sZi5R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sZi5R.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;div formArrayName="leaf_grade"&gt;
                      &lt;div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index"&gt;
                          &lt;div [formGroupName]="i"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label&gt;Leaf Grade {{i + 1}}&lt;/label&gt;
                                  &lt;select name="grade" formControlName="grade" class="form-control" id="grade"&gt;
  
                                      &lt;option *ngFor='let lg of grades' [value]="lg.name"&gt;{{ lg.name }}&lt;/option&gt;
                                  &lt;/select&gt;
                                  &lt;small *ngIf="!cplForm.controls.leaf_grade.controls[i].controls.grade.valid &amp;&amp; cplForm.controls.leaf-grade.controls[i].controls.grade.touched"&gt;
                                      Leaf Grade is required
                                  &lt;/small&gt;
                                  &lt;div&gt;
                                      &lt;span *ngIf="cplForm.controls.leaf_grade.controls.length &gt; 1" class="remove-form-control"&gt;
                                          &lt;a (click)="removeGradeData(i)"&gt;
                                          &lt;i class="fa fa-times fa-fw" aria-hidden="true"&gt;&lt;/i&gt; Remove
                                          &lt;/a&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>grades</strong> contain from console.log(grades)</p>
  
  <p>(2) [Object, Object]
  0: Object
  1: Object
  length: 2</p>