Question

基于此堆栈上的question，我需要为从角度材质表dataSource生成的每一行绑定一个下拉列表。下拉列表应自动选择对应的值以及其他值。

这是表格：

<form [formGroup]="formGroup">
    <table mat-table [dataSource]="dataSource" matSort>


      <!-- <ng-container matColumnDef="ind_id">
        <th mat-header-cell *matHeaderCellDef> Ind. ID </th>
        <td mat-cell *matCellDef="let element"> {{element.iid}} </td>
      </ng-container> -->


      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element" [matTooltip]="element.iid" matTooltipPosition="left"> <b>{{element.far}} {{element.lar}}</b> </td>

      </ng-container>


      <ng-container matColumnDef="head_hh">
        <th mat-header-cell *matHeaderCellDef> Head Of HH </th>
        <td mat-cell *matCellDef="let element"> {{element.hhead}} </td>
      </ng-container>


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

      <ng-container matColumnDef="ms">
        <th mat-header-cell *matHeaderCellDef> Marital Sts. </th>
        <td mat-cell *matCellDef="let element"> {{element.ms}} </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element"> {{element.sts}} </td>
      </ng-container>
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
        <td mat-cell *matCellDef="let element"> {{element.age}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</form>

这是打字稿代码，在此我根据上面所附的问题stackblitz生成了一个FormArray：

constructor(private fb: FormBuilder, 
    private activatedRoute: ActivatedRoute, 
    private auth: AuthApiService) {
      this.formGroup = this.fb.group({
        'fr': this.createArray()
      })
}

现在，对于数组的每个formControl，我需要将数据绑定到放置列表：

createArray(): FormArray{
    return new FormArray(this.dataSource.data.map(item=> new FormGroup({
      fr: new FormControl(item.frid)
    })));
}

frid是下拉列表中每个选定选项的value，fr是为用户显示的名称。

我遇到以下错误：

[ts]类型“ {}”上不存在属性“ frid”。 [2339]

以下是返回数组的摘要：

0：{0：“ xyzzz”，1：“ xyz”，2：57073、3：2、4：“父母”，5：

“已婚”，6：“活跃”，7：“否”，...}

0：“ xyz”

1：“ zyz”

2：57073

3：2

4：“父母”

5：“已婚”

6：“有效”

7：“否”

8：61

年龄：61

远：“ xyz”

fr：“父母”

弗里德：2

hhead：“否”

iid：57073

lar：“ xyz”

ms：“已婚”

sts：“有效”

这是我的stackblitz。

如何在角材料6表中的数据源的每一行中生成表单控件？

Answer 1

您应将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="changeRadioName">Change name of each row's radio</button> <table class="table table-bordered table-striped table-hover"> <tr> <td> <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label> <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label> </td> </tr> <tr> <td> <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label> <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label> </td> </tr> <tr> <td> <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label> <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label> </td> </tr> <tr> <td> <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label> <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label> </td> </tr> </table>传递给Type。

MatTableDataSource

OR：推荐一个

dataSource = new MatTableDataSource<any>(); //<-- any which accept all kind of classes.

Answer 2

或者您可以简单地

createArray(): FormArray{
    return new FormArray(this.dataSource.data.map(item=> new FormGroup({
      fr: new FormControl(item['frid'])
    })));
}

为每一行生成下拉列表表单控件时，Angular 7和Angular Material表出现数据源错误

2 个答案: