Question

我目前有一个角度材质表，它从我拥有的api端点返回值。目前，它返回正确的值，除了我有选择下拉列表的单元格。

这里是我对材料表选择下拉列表的一个片段：

 <div class="matTable-container">
         <mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="Active">
                <mat-header-cell *matHeaderCellDef > {{ 'Active' | translate}}? </mat-header-cell>
                <mat-cell class="is-active" *matCellDef="let product">
                    <mat-form-field>
                        <mat-select>
                            <mat-option *ngFor="let active of activeTypes" [value]="product._isActive">{{product._isActive}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns; let even = even; let odd = odd"  [ngClass]="{'table-even': even, 'table-odd': odd}"></mat-row>
        </mat-table>
        </div>

在上面的例子中，目前它是绑定值[＆＃39;是＆＃39;，＆＃39;是＆＃39;]而不是[＆＃39;是＆＃39;，＆＃39;否＆＃ 39;]虽然我指定了activeTypes = ['Yes', 'No'];。它似乎显示了从api和现有值返回的值，其中Yes替换为No.

在这种情况下，如何确保正确显示绑定并且下拉列表中的值是正确的，其中下拉列表中的值应为[＆＃39;是＆＃39;，＆＃39;否＆＃39 ;]和绑定/选定的默认值应为＆＃39;是＆＃39;这个特别的项目？

上面我做错了什么？

Answer 1

您应该使用由mat-option创建的active数据绑定到*ngFor="let active of activeTypes"。

<mat-option *ngFor="let active of activeTypes" [value]="active">{{active}}</mat-option>

并通过mat-select

将实际数据绑定到[(ngModel)]

<mat-select [(ngModel)]="product._isActive">
  ...
</mat-select>

对于被动表单，您应在创建formControl时为其分配实际值，并通过mat-select绑定名称将这些formControl分配给formControlName。

下面是一个示例，我根据数据源创建了一个formArray，并通过mat-select将表单数组的索引（与行索引相同）绑定到formControlName。

<form [formGroup]="form">
  <mat-table #table [dataSource]="dataSource" formArrayName="test">
    ...
    <ng-container matColumnDef="active">
      <mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index;">
        <mat-select [formControlName]="i">
          <mat-option [value]="active" *ngFor="let active of activeList">
            {{ active }}
          </mat-option>
        </mat-select>
      </mat-cell>
    </ng-container>
    ...
  </mat-table>
</form>

this.form = this.fb.group({
  test: new FormArray(this.dataSource.map(item => new FormControl(item.active)))
});

请参阅 demo 和 reactive form demo 。

如何使用单元格内的下拉列表为材质表设置正确的绑定？

1 个答案: