物料表数据源中的Angular 7下拉列表正在选择数组的最后一项

时间:2018-12-03 12:33:26

标签: angular drop-down-menu angular-material angular7 angular-material-6

我在具有数据源的棱角材料表中包含此表单组;

<ng-container matColumnDef="fr">
    <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
    <td mat-cell *matCellDef="let element">
        <mat-form-field color="warn" appearance="outline">
        <mat-label>Family Relation</mat-label>
             <mat-select id="family_relation" formControlName="family_relation" placeholder="Family Relation">
                   <mat-option *ngFor="let familyRelation of familyRelationArray; let i = index" [value]="familyRelation.family_relation_id">
                        {{familyRelation.family_relation_type}}
                   </mat-option>
             </mat-select>
        </mat-form-field>&nbsp;
                  {{element.fr}}
    </td>
</ng-container>

我正在通过这种方法获得familyRelationArray

getFamilyRelation() {
    let status = 'Active';
    this.auth.getFamilyRelation(status).subscribe(
      (data) => {
        this.familyRelationArray = data;
      },
      (error) => {
        console.log(error);
      }
    );
  }

对于我的材料表中显示的每一行,它们都是不同的家庭关系。

我正在使用以下方法显示数据:

getData()
  {
    this.auth.getIndPerHousehold(this.hh_id).subscribe(
      (data)=>{
        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 => {
            //console.log(element.frid)
            this.formGroup.get('family_relation').setValue(element.frid);
          });
        }
      },
      (error)=>
      {
        console.log(error);
      }
    );
  }

我正在使用以下方法来选择家庭中每个人的对应关系:

Object.values(data).forEach(element => {
    //console.log(element.frid)
    this.formGroup.get('family_relation').setValue(element.frid);
});

表中显示的是常规数据,但下拉列表选择了element.frid的最后导入值。

所以最后一行是孩子,所有下拉列表都选择child

enter image description here

请注意,frid与family_relation_id相同。

如何在数据源订阅结果内部运行循环,以使下拉列表选择每行的确切值?

0 个答案:

没有答案