角度材质表与formControl排序

时间:2017-08-29 19:55:24

标签: angular angular-material2 form-control

目前有一个问题是,当点击排序时,按行数组中具有formControls的列数据&控件未正确更新。所有其他列都按预期更新。下面是具有formControls的代码:

<form [formGroup]="rackAverageForms[i]">
          <md-input-container>
            <input [formControl]="rackAverageForms[i].controls.rackAverage" #rackAverage
                   formControlName="rackAverage"
                   (keydown.tab)="validateRackAverage(rackAverage,i)" class="numeric-field" [numberOnly]="true"
                   mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}">
            <md-error><strong>{{formErrors[i].rackAverage}}</strong></md-error>
          </md-input-container>
</form>

以下是排序之前的屏幕截图: md-table view before trying to sort

这是在排序后数据消失了: md-table view after sorting with missing data

有时会有一个值会挂起,但大多数时候,此列中的所有值都消失了,控件也消失了。请帮忙。

1 个答案:

答案 0 :(得分:1)

在尝试了几个不同的东西后,切换到使用row.id唯一值来查找formcontrol它现在正在工作。请参阅下面的固定html:

       <form [formGroup]="rackAverageForms[row.id]">
          <ng-container *ngIf="row.chosenDateRackAverage > 0">
            <md-input-container>
              <input [formControl]="rackAverageForms[row.id].controls.rackAverage" #rackAverage
                     formControlName="rackAverage"
                     (keydown.tab)="validateRackAverage(rackAverage,row.id)" class="numeric-field" [numberOnly]="true"
                     mdInput value="{{row.chosenDateRackAverage | currency:'USD':true:'1.4-4'}}" >
              <md-error><strong>{{formErrors[row.id].rackAverage}}</strong></md-error>
            </md-input-container>
          </ng-container>
        </form>