eckige Materialtabelle mit formControl sortieren

Question

Derzeit ein Problem, dass beim Klicken auf die Spalte, die FormControls in einem Array nach Zeile hat, die Daten & Steuerelemente nicht korrekt aktualisiert werden. Alle anderen Spalten werden wie erwartet aktualisiert. Unten ist der Code, der die formControls hat:

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

Hier ist ein Screenshot von vor sort: md-table view before trying to sort

Dies ist nach dem Sortieren und die Daten gegangen: md-table view after sorting with missing data

Manchmal ist man dort Wert, der herumhängt, aber die meiste Zeit sind alle Werte in dieser Spalte weg und Kontrollen sind auch gegangen. Bitte helfen Sie.

Answer 1

Nachdem Sie ein paar verschiedene Dinge versucht haben, wechseln Sie jetzt zur Verwendung des einzigartigen Wertes row.id, um das formcontrol nachzuschlagen. Siehe untenstehende feste 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>