如何在单元格内部具有下拉菜单的物料表中建立适当的绑定?

问题描述

我目前有一个角度材料表，该表从我拥有的api端点返回值.目前，它会返回正确的值，但我具有选择下拉列表的单元格除外.

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>

在上面的示例中，尽管我指定了activeTypes = ['Yes', 'No'];，但当前它绑定的是值['Yes'，'Yes']而不是['Yes'，'No'].似乎正在显示从api返回的值和是"替换否"的现有值.

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.

在这种情况下，如何确保绑定显示正确并且下拉列表中的值正确，其中下拉列表中的值应为['Yes'，'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?

上面我在做什么错?

推荐答案

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

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>

并通过[(ngModel)]

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

---

对于反应式表单，应在创建窗体控件时为其分配实值，并通过formControlName绑定名称将这些窗体控件分配给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.

下面是一个示例，我基于数据源和通过formControlName将表单数组(与行索引相同)的绑定索引绑定到mat-select创建了一个formArray.

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.

这篇关于如何在单元格内部具有下拉菜单的物料表中建立适当的绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！