How to set up proper bindings for material table with dropdown inside cell?

问题

I currently have an angular material table that returns values from an api endpoint that I have. Currently, it returns the proper values except for the cells where I have a selection dropdown.

Here's a snippet of what I have for material table selection dropdown:

 <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>

In the example above, currently it is binding values ['Yes', 'Yes'] instead of ['Yes','No'] albeit I specified activeTypes = ['Yes', 'No']; . It seems like it is showing the value that is returned from api and existing value where Yes is replacing No.

In this scenario, how can I make sure the binding is properly displayed and the values in the dropdown are correct where the values in the dropdown should be ['Yes','No'] and the bound/selected default value should be 'Yes' for this particular item?

What am I doing wrong above?

回答1:

You should bind to mat-option with data from active which is created by *ngFor="let active of activeTypes".

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

And bind the real data to mat-select via [(ngModel)]

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

---

For reactive form, you shall assign real value to formControls when you create them and assign those formControls to mat-select by binding names via formControlName.

Below is an example which I created a formArray based on datasource and bound index of form array(same as row index) to mat-select via 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)))
});

Refer working demo and reactive form demo.

来源：https://stackoverflow.com/questions/49992158/how-to-set-up-proper-bindings-for-material-table-with-dropdown-inside-cell