title: Angular 7 Drop down list inside material table data source is selecting the last item of the array
body: <p>I have this form group inside an angular material table having data source;</p>
  
  <pre><code>&lt;ng-container matColumnDef="fr"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Family Rel. &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
          &lt;mat-form-field color="warn" appearance="outline"&gt;
          &lt;mat-label&gt;Family Relation&lt;/mat-label&gt;
               &lt;mat-select id="family_relation" formControlName="family_relation" placeholder="Family Relation"&gt;
                     &lt;mat-option *ngFor="let familyRelation of familyRelationArray; let i = index" [value]="familyRelation.family_relation_id"&gt;
                          {{familyRelation.family_relation_type}}
                     &lt;/mat-option&gt;
               &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;&amp;nbsp;
                    {{element.fr}}
      &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>I am getting <code>familyRelationArray</code> from this method:</p>
  
  <pre><code>getFamilyRelation() {
      let status = 'Active';
      this.auth.getFamilyRelation(status).subscribe(
        (data) =&gt; {
          this.familyRelationArray = data;
        },
        (error) =&gt; {
          console.log(error);
        }
      );
    }
  </code></pre>
  
  <p>For each row displayed in my material table, their is a different family relation.</p>
  
  <p>I am displaying data using the following:</p>
  
  <pre><code>getData()
    {
      this.auth.getIndPerHousehold(this.hh_id).subscribe(
        (data)=&gt;{
          if(data=="empty")
          {
            this.showEmpty = true;
          }
          else
          {
            this.showEmpty = false;
            this.dataSource = new MatTableDataSource(Object.values(data));
            this.resultsLength = Object.values(data).length;
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
            // this.formGroup.controls['family_relation'].setValue(Object.values(data[0]['frid']));
            Object.values(data).forEach(element =&gt; {
              //console.log(element.frid)
              this.formGroup.get('family_relation').setValue(element.frid);
            });
          }
        },
        (error)=&gt;
        {
          console.log(error);
        }
      );
    }
  </code></pre>
  
  <p>I am using the following to select the correspondent relation of each individual in the family:</p>
  
  <pre><code>Object.values(data).forEach(element =&gt; {
      //console.log(element.frid)
      this.formGroup.get('family_relation').setValue(element.frid);
  });
  </code></pre>
  
  <p>What is displayed in the table is the regular data but the drop down lists are selecting the last imported value of <code>element.frid</code>.</p>
  
  <p>So the last row is a child, all the drop down lists are selecting <code>child</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/yg1BF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yg1BF.jpg" alt="enter image description here"></a></p>
  
  <p>Please note that <code>frid</code> is the same as family_relation_id.</p>
  
  <p>How to run a loop inside datasource subscribe result to let the drop down list select the exact value of each row ?</p>